/* estilo.css — KAY (Kay Escuela de Consciencia) */
/* Misma paleta y base que El Espejo (dorados sobre noche) + estilos de chat
   tomados de kay-agente.html (kayescuela.com), para que la experiencia se
   sienta como el mismo agente. */

:root {
  --gold: #E8951A;
  --gold-light: #F5C842;
  --gold-dark: #C45C0A;
  --crimson: #8B1A00;
  --night: #14100A;
  --night-2: #1A1208;
  --night-3: #221510;
  --card-from: #221610;
  --card-to: #1B120C;
  --cream: #FFF8E7;
  --cream-dim: rgba(255, 248, 231, 0.7);
  --cream-faint: rgba(255, 248, 231, 0.35);
  --teal: #2A7A6A;
  --teal-light: #4ABBA0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--night);
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  min-height: 100vh;
}

#fondo-particulas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.app-shell {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pantalla {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  animation: fadeIn 0.6s ease;
}

.pantalla.activa { display: flex; }

/* El chat necesita ancho completo y layout de columna sin centrar texto */
.pantalla.pantalla-chat.activa {
  align-items: stretch;
  text-align: left;
  max-width: 44rem;
  width: 100%;
  margin: 0 auto;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.marca {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.1rem, 8vw, 3.1rem);
  color: var(--gold-light);
  letter-spacing: 0.1em;
  text-shadow: 0 0 24px rgba(232, 149, 26, 0.25);
}

.marca span {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--cream-dim);
  letter-spacing: 0.02em;
  margin-top: 0.6rem;
}

.marca .frase-latin {
  color: var(--gold-light);
  letter-spacing: 0.06em;
}

.frase-portada {
  font-size: 1.4rem;
  line-height: 1.65;
  color: var(--cream-dim);
  font-style: italic;
  max-width: 28rem;
}

.frase-precio {
  font-size: 1.05rem;
  color: var(--gold-light);
  letter-spacing: 0.03em;
}

h2 {
  font-family: 'Cinzel', serif;
  color: var(--gold);
  font-size: 1.55rem;
  letter-spacing: 0.04em;
}

.btn-dorado {
  display: inline-block;
  padding: 1rem 2.4rem;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  border: none;
  border-radius: 8px;
  color: var(--night);
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-dorado:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232, 149, 26, 0.35);
}

form {
  width: 100%;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
}

.campo label {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--gold-light);
}

.campo input[type="date"],
.campo input[type="time"],
.campo input[type="text"],
.campo select {
  background: rgba(255, 248, 231, 0.06);
  border: 1px solid rgba(232, 149, 26, 0.35);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  color: var(--cream);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
}

.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--gold);
}

.campo select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color-scheme: dark;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8951A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.9rem;
  padding-right: 2.2rem;
}

.campo select:disabled {
  cursor: not-allowed;
}

.campo select option {
  background: var(--night-2);
  color: var(--cream);
}

.selectores-fecha,
.selectores-hora {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.selectores-fecha select,
.selectores-hora select {
  flex: 1;
  min-width: 0;
}

.selectores-hora span {
  color: var(--cream-dim);
}

.selectores-hora.deshabilitado {
  opacity: 0.4;
  pointer-events: none;
}

.ayuda-hora {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--cream-dim);
}

.campo-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  font-size: 0.95rem;
  color: var(--cream-dim);
}

.spinner-dorado {
  width: 54px;
  height: 54px;
  border: 3px solid rgba(232, 149, 26, 0.2);
  border-top: 3px solid var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.barra-progreso {
  width: 100%;
  max-width: 16rem;
  height: 6px;
  background: rgba(255, 248, 231, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.barra-progreso-relleno {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  border-radius: 999px;
  transition: width 0.5s ease;
}

.mensaje-error {
  background: rgba(139, 26, 0, 0.2);
  border: 1px solid var(--crimson);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  color: #E8754A;
  font-size: 0.9rem;
}

#paypal-button-container {
  width: 100%;
  max-width: 20rem;
}

/* ============================================================
   CHAT — adaptado de kay-agente.html (kayescuela.com)
   ============================================================ */

.chat-context-bar {
  background: linear-gradient(135deg, rgba(42, 122, 106, 0.12), rgba(26, 18, 8, 0.6));
  border: 1px solid rgba(74, 187, 160, 0.25);
  border-radius: 10px;
  padding: 0.7rem 1.2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.chat-context-bar span {
  color: var(--teal-light);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-height: 300px;
  max-height: 58vh;
}

.messages::-webkit-scrollbar { width: 4px; }
.messages::-webkit-scrollbar-thumb { background: rgba(232, 149, 26, 0.3); border-radius: 2px; }

.msg { display: flex; gap: 0.8rem; animation: msgIn 0.4s ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.msg.user { flex-direction: row-reverse; }

.msg-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0; margin-top: 2px;
}

.msg-avatar-kay {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--night); font-family: 'Cinzel', serif;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
}

.msg.user .msg-avatar {
  background: rgba(44, 24, 16, 0.8);
  border: 1px solid rgba(232, 149, 26, 0.3); font-size: 0.9rem;
}

.msg-bubble {
  max-width: 85%; padding: 1rem 1.2rem;
  border-radius: 14px; line-height: 1.75; font-size: 1.1rem;
}

.msg.kay .msg-bubble {
  background: linear-gradient(135deg, var(--night-2), var(--night-3));
  border: 1px solid rgba(232, 149, 26, 0.2); color: var(--cream);
  border-radius: 4px 14px 14px 14px;
}

.msg.user .msg-bubble {
  background: rgba(232, 149, 26, 0.1);
  border: 1px solid rgba(232, 149, 26, 0.25); color: var(--cream);
  border-radius: 14px 4px 14px 14px; text-align: right;
}

.typing-indicator { display: none; gap: 0.8rem; animation: msgIn 0.3s ease; margin-top: -0.4rem; }
.typing-indicator.visible { display: flex; }

.typing-dots {
  background: linear-gradient(135deg, var(--night-2), var(--night-3));
  border: 1px solid rgba(232, 149, 26, 0.2);
  border-radius: 4px 14px 14px 14px;
  padding: 1rem 1.2rem;
  display: flex; gap: 4px; align-items: center;
}

.dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; animation: bounce 1.2s infinite; opacity: 0.6; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.6; } 30% { transform: translateY(-6px); opacity: 1; } }

.input-area { margin-top: 1rem; display: flex; gap: 0.6rem; align-items: flex-end; }

.input-wrap {
  flex: 1; background: rgba(26, 18, 8, 0.8);
  border: 1px solid rgba(232, 149, 26, 0.3); border-radius: 12px;
  padding: 0.8rem 1rem; transition: border-color 0.3s;
}

.input-wrap:focus-within { border-color: var(--gold); }

.chat-input {
  width: 100%; background: transparent; border: none;
  color: var(--cream); font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem; line-height: 1.6; resize: none;
  min-height: 44px; max-height: 120px; outline: none;
}

.chat-input::placeholder { color: var(--cream-faint); font-style: italic; }

.btn-send {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  border: none; border-radius: 10px; color: var(--night);
  font-size: 1.2rem; cursor: pointer; transition: all 0.3s;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.btn-send:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(232, 149, 26, 0.4); }
.btn-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

@media (min-width: 640px) {
  .app-shell { padding: 3rem 2rem; }
}

@media (max-width: 600px) {
  .msg-bubble { max-width: 92%; font-size: 1.02rem; }
}

/* ============================================================
   PORTADA — tamaños propios, solo esta pantalla, notablemente
   más grandes que el resto del sitio (efecto de hero de entrada).
   ============================================================ */
#screen-portada .marca { font-size: clamp(3.2rem, 13vw, 5.4rem); }
#screen-portada .marca span { font-size: 1.35rem; }
#screen-portada .frase-portada { font-size: 1.9rem; line-height: 1.55; max-width: 34rem; }
#screen-portada .frase-precio { font-size: 1.3rem; max-width: 30rem; }
#screen-portada .btn-dorado { font-size: 1.25rem; padding: 1.15rem 2.8rem; }

.testimonio {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--cream-dim);
  max-width: 26rem;
  position: relative;
  padding: 0 0.5rem;
}

/* ============================================================
   FONDO DE LA PORTADA — foto real, oscurecida para que el texto
   se lea. Capa fija de pantalla completa (igual que el canvas de
   partículas), se muestra solo mientras la portada está activa
   (app.js alterna la clase .visible al cambiar de pantalla).
   ============================================================ */
#fondo-portada {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(20, 16, 10, 0.5), rgba(20, 16, 10, 0.88)),
    url('../img/portada-fondo.jpg') center center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
#fondo-portada.visible { opacity: 1; }