/* ─────────────────────────────────────────────────────────────────────────────
   Página de Aura (WEB-071b). Solo la carga /aura.

   Hereda los colores y el ancho del tema (cruslar-home.css) y añade lo suyo:
   las conversaciones de ejemplo y el panel. Prefijo `cxa-` para que no choque
   con nada del tema.

   La escena de la demo es DOS COLUMNAS en escritorio y UNA en móvil, y el móvil
   manda: casi todo el que llegue a esta página lo hará desde un teléfono, y la
   conversación tiene que leerse ahí sin pellizcar la pantalla.
   ───────────────────────────────────────────────────────────────────────────── */

.cxa-hero { padding-bottom: 0; }

.cxa-tagline {
  font-size: clamp(1.4rem, 3.4vw, 2.3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: .2rem 0 1rem;
  text-wrap: balance;
}

.cxa-botones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

.cxa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.6rem;
  border-radius: 999px; font-weight: 700; font-size: 1rem;
  text-decoration: none; transition: transform .18s cubic-bezier(.23,1,.32,1), opacity .18s;
}
.cxa-btn:active { transform: scale(.97); }
.cxa-btn-primario { background: var(--cx-amarillo); color: #16160b; }
.cxa-btn-primario:hover { opacity: .88; }
.cxa-btn-borde { border: 1px solid var(--cx-borde); color: var(--cx-texto); }
.cxa-btn-borde:hover { border-color: var(--cx-amarillo); color: var(--cx-amarillo); }

.cxa-notita { color: var(--cx-texto-suave); font-size: .88rem; margin-top: 1rem; }

.cxa-seccion {
  max-width: var(--cx-ancho-lectura);
  margin: 0 auto; padding: 5rem 1.25rem;
  border-top: 1px solid var(--cx-borde);
}

.cxa-titulo {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
  margin: .3rem 0 1rem; text-wrap: balance;
}

/* ── El selector de sector ─────────────────────────────────────────────── */
.cxa-pestanas {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 1.5rem;
}
.cxa-pestana {
  background: none; color: var(--cx-texto-suave);
  border: 1px solid var(--cx-borde); border-radius: 999px;
  padding: .6rem 1.1rem; min-height: 44px;
  font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.cxa-pestana:hover { color: var(--cx-texto); border-color: rgba(255,255,255,.25); }
.cxa-pestana.activa {
  background: var(--cx-amarillo); border-color: var(--cx-amarillo); color: #16160b;
}
.cxa-pestana:focus-visible { outline: 2px solid var(--cx-amarillo); outline-offset: 3px; }

/* ── La escena: conversación + panel ───────────────────────────────────── */
.cxa-escena { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
.cxa-escena.oculta { display: none; }

@media (min-width: 900px) {
  .cxa-escena { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 3.5rem; }
}

.cxa-rotulo {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cx-texto-suave); font-weight: 700; margin-bottom: .9rem;
}

/* El móvil con la conversación. */
.cxa-movil {
  background: #efeae2; border-radius: 22px; overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.9);
}
.cxa-movil-cab {
  background: #1d2340; color: #fff; padding: .8rem 1rem;
  display: flex; align-items: center; gap: .7rem;
}
.cxa-movil-cab strong { display: block; font-size: .98rem; }
.cxa-movil-cab small { color: rgba(255,255,255,.62); font-size: .78rem; }
.cxa-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--cx-amarillo); color: #16160b;
  display: grid; place-items: center; font-weight: 800; font-size: .85rem;
}

.cxa-chat { padding: 1rem .9rem; display: flex; flex-direction: column; gap: .6rem; }

.cxa-burbuja {
  max-width: 86%; padding: .6rem .8rem 1.3rem; border-radius: 14px;
  font-size: .95rem; line-height: 1.45; color: #111b21; position: relative;
}
.cxa-burbuja.cliente { background: #fff; align-self: flex-start; border-top-left-radius: 4px; }
.cxa-burbuja.aura    { background: #d9fdd3; align-self: flex-end;   border-top-right-radius: 4px; }
.cxa-hora {
  position: absolute; right: .7rem; bottom: .4rem;
  font-size: .68rem; color: rgba(0,0,0,.42);
}

.cxa-escribir {
  margin: 0 .9rem 1rem; background: #fff; border-radius: 999px;
  padding: .7rem 1rem; color: #8a949c; font-size: .9rem;
}

.cxa-remate {
  margin-top: 1rem; color: var(--cx-amarillo);
  font-size: .95rem; font-weight: 600;
}

/* El panel: lo que pasa del otro lado.

   Con tope de ancho: al lado de un movil de 420 px, una columna estirada a
   1000 px descuadra la pareja y las tarjetas quedan larguisimas para tres
   palabras. Se queda en 560 y respira. */
.cxa-panel {
  display: flex; flex-direction: column; gap: .9rem;
  max-width: 560px;
}

.cxa-tarjeta {
  border: 1px solid var(--cx-borde); border-left: 3px solid var(--cx-amarillo);
  border-radius: 10px; padding: 1.1rem 1.3rem;
  /* Fondo OPACO: detras hay una animacion 3D y con un fondo translucido las
     lineas se cuelan por debajo del texto y no hay quien lo lea. */
  background: #10101a;
}
.cxa-tarjeta-t { font-weight: 700; margin-bottom: .25rem; }
.cxa-tarjeta-x { color: var(--cx-texto-suave); font-size: .95rem; }
.cxa-aviso { border-left-color: rgba(255,255,255,.2); }

/* ── Cómo lo hace ──────────────────────────────────────────────────────── */
.cxa-pasos {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .cxa-pasos { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; } }
@media (min-width: 1200px) { .cxa-pasos { grid-template-columns: repeat(4, 1fr); } }

.cxa-pasos li { border-top: 2px solid var(--cx-amarillo); padding-top: 1.1rem; }
.cxa-num {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em;
  color: var(--cx-amarillo); display: block; margin-bottom: .5rem;
}
.cxa-pasos h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .5rem; }
.cxa-pasos p { color: var(--cx-texto-suave); font-size: .96rem; line-height: 1.6; margin: 0; }

/* ── Las dos caras ─────────────────────────────────────────────────────── */
.cxa-caras { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 800px) { .cxa-caras { grid-template-columns: 1fr 1fr; gap: 2rem; } }

.cxa-cara {
  border: 1px solid var(--cx-borde); border-radius: 14px; padding: 1.8rem;
}
.cxa-cara-tuya { border-color: rgba(255,195,0,.35); background: rgba(255,195,0,.04); }
.cxa-cara h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 1.1rem; }
.cxa-cara ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.cxa-cara li {
  color: var(--cx-texto-suave); font-size: .98rem; line-height: 1.55;
  padding-left: 1.4rem; position: relative;
}
.cxa-cara li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cx-amarillo);
}

/* ── Garantías ─────────────────────────────────────────────────────────── */
.cxa-garantias { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 760px)  { .cxa-garantias { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .cxa-garantias { grid-template-columns: repeat(4, 1fr); } }

.cxa-garantia { border: 1px solid var(--cx-borde); border-radius: 14px; padding: 1.5rem; }
.cxa-garantia h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .5rem; }
.cxa-garantia p { color: var(--cx-texto-suave); font-size: .93rem; line-height: 1.55; margin: 0; }

/* ── Precio ────────────────────────────────────────────────────────────── */
.cxa-precio { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cxa-precio { grid-template-columns: 1.2fr 1fr; gap: 4rem; } }
.cxa-precio p { color: var(--cx-texto-suave); line-height: 1.65; margin: 0 0 1rem; }
.cxa-suave { font-size: .93rem; }

.cxa-cifra {
  font-size: clamp(2.6rem, 7vw, 4.2rem); font-weight: 800; line-height: 1;
  color: var(--cx-texto) !important; margin: .4rem 0 1.2rem !important;
  letter-spacing: -.03em;
}
.cxa-desde, .cxa-mes {
  font-size: .95rem; font-weight: 600; color: var(--cx-texto-suave);
  letter-spacing: 0; display: inline-block; vertical-align: middle;
}
.cxa-plazo { font-size: 1.5rem; font-weight: 800; margin: .3rem 0 1rem; letter-spacing: -.01em; }

/* ── Cierre ────────────────────────────────────────────────────────────── */
.cxa-cierre { text-align: center; }
.cxa-cierre .cx-lead { margin-left: auto; margin-right: auto; }
.cxa-cierre .cxa-botones { justify-content: center; }
.cxa-cierre .cxa-notita { max-width: 62ch; margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) { .cxa-btn { transition: none; } }

/* ─────────────────────────────────────────────────────────────────────────────
   El chat de Aura en la propia web (WEB-072).

   La interfaz de WhatsApp con nuestros colores: quien lo abre sabe usarlo sin
   que se lo expliquen. Esa familiaridad no es un capricho estético — es la
   diferencia entre que lo prueben y que no.
   ───────────────────────────────────────────────────────────────────────────── */

.cxa-lanzador {
  position: fixed; z-index: 80;
  right: max(clamp(18px,3vw,30px), calc((100vw - var(--cx-ancho)) / 2 + clamp(18px,3vw,30px)));
  bottom: clamp(18px,3vw,30px);
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 56px; padding: 0 1.4rem 0 1.1rem;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--cx-amarillo); color: #16160b;
  font-weight: 700; font-size: .98rem;
  box-shadow: 0 14px 40px -12px rgba(0,0,0,.75);
  transition: transform .2s cubic-bezier(.23,1,.32,1), opacity .2s;
}
.cxa-lanzador:hover { transform: translateY(-2px); }
.cxa-lanzador:active { transform: scale(.97); }
.cxa-lanzador.escondido { opacity: 0; pointer-events: none; transform: scale(.9); }
.cxa-lanzador:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* En un móvil el rótulo se cae: el icono se entiende igual y no tapa media
   pantalla justo donde está el pulgar. */
@media (max-width: 560px) {
  .cxa-lanzador span { display: none; }
  .cxa-lanzador { padding: 0; width: 56px; justify-content: center; }
}

.cxa-chat-caja {
  position: fixed; z-index: 90;
  right: max(clamp(14px,3vw,30px), calc((100vw - var(--cx-ancho)) / 2 + clamp(14px,3vw,30px)));
  bottom: clamp(14px,3vw,30px);
  width: min(400px, calc(100vw - 28px));
  height: min(620px, calc(100dvh - 28px));
  display: flex; flex-direction: column;
  background: #efeae2; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9);
  transform: translateY(16px) scale(.98); opacity: 0;
  transition: transform .26s cubic-bezier(.23,1,.32,1), opacity .26s;
}
.cxa-chat-caja.abierto { transform: none; opacity: 1; }

/* A pantalla completa en el móvil: una ventanita flotante de 400 px en un
   teléfono no la lee nadie. */
@media (max-width: 560px) {
  .cxa-chat-caja {
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100%; height: 100dvh; border-radius: 0;
  }
}

.cxa-chat-cab {
  background: #1d2340; color: #fff; flex: 0 0 auto;
  padding: .8rem 1rem; padding-top: calc(.8rem + env(safe-area-inset-top));
  display: flex; align-items: center; gap: .7rem;
}
.cxa-chat-quien { flex: 1 1 auto; min-width: 0; }
.cxa-chat-quien strong { display: block; font-size: 1rem; }
.cxa-chat-quien small { color: rgba(255,255,255,.6); font-size: .78rem; }
.cxa-chat-cerrar {
  background: none; border: none; color: #fff; cursor: pointer;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
}
.cxa-chat-cerrar:hover { background: rgba(255,255,255,.1); }

.cxa-chat-hilo {
  flex: 1 1 auto; overflow-y: auto; padding: 1rem .9rem;
  display: flex; flex-direction: column; gap: .55rem;
}

.cxa-chat-b {
  max-width: 88%; padding: .6rem .8rem; border-radius: 14px;
  font-size: .95rem; line-height: 1.45; color: #111b21;
  animation: cxa-entra .22s cubic-bezier(.23,1,.32,1);
}
.cxa-chat-b.suya { background: #fff; align-self: flex-start; border-top-left-radius: 4px; }
.cxa-chat-b.mia  { background: #d9fdd3; align-self: flex-end; border-top-right-radius: 4px; }
.cxa-chat-b.pensando { color: #8a949c; letter-spacing: .2em; }
@keyframes cxa-entra { from { opacity: 0; transform: translateY(6px); } }

.cxa-chat-opciones {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .9rem .6rem;
}
.cxa-chat-opciones button {
  background: #fff; border: 1px solid rgba(0,0,0,.1); color: #1d2340;
  border-radius: 999px; padding: .5rem .9rem; min-height: 40px;
  font-size: .88rem; font-weight: 600; cursor: pointer;
}
.cxa-chat-opciones button:hover { background: #d9fdd3; }

.cxa-chat-form {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: .5rem;
  padding: .6rem .9rem; background: #efeae2;
}
.cxa-chat-form textarea {
  flex: 1 1 auto; resize: none; border: none; border-radius: 1.2rem;
  padding: .7rem .9rem; min-height: 44px; max-height: 110px;
  font: inherit; font-size: .95rem; line-height: 1.4; color: #111b21;
}
.cxa-chat-form textarea:focus { outline: 2px solid var(--cx-amarillo); outline-offset: 1px; }
.cxa-chat-enviar {
  flex: none; width: 44px; height: 44px; border: none; border-radius: 50%;
  background: var(--cx-amarillo); color: #16160b; cursor: pointer;
  display: grid; place-items: center;
}
.cxa-chat-enviar:active { transform: scale(.94); }

.cxa-chat-pie {
  flex: 0 0 auto; margin: 0; padding: 0 .9rem .8rem;
  padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
  font-size: .72rem; color: #6b7580; text-align: center; background: #efeae2;
}

@media (prefers-reduced-motion: reduce) {
  .cxa-chat-caja, .cxa-lanzador { transition: none; }
  .cxa-chat-b { animation: none; }
}