/* Siale Gestión — tema "Noche índigo" (mismos tokens que adiosdolordecabeza) */
:root {
  --fondo: #141333;
  --fondo-2: #100F29;
  --superficie: #1E1C44;
  --superficie-2: #272551;
  --texto: #F1EFFF;
  --texto-2: #A8A4CF;
  --texto-3: #7D79A8;
  --acento: #7C6CFF;
  --acento-hover: #9384FF;
  --sobre-acento: #16132E;
  --eyebrow: #C4B6FF;
  --lima: #CDF564;
  --coral: #FF6F7D;
  --borde: rgba(196, 182, 255, 0.14);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Figtree", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--eyebrow); text-decoration: none; }
a:hover { color: var(--acento-hover); text-decoration: underline; }

.cabecera {
  border-bottom: 1px solid var(--borde);
  background: rgba(20, 19, 51, 0.85);
  backdrop-filter: blur(8px);
}
.cabecera-int {
  max-width: 1120px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.marca {
  font-family: "Playfair Display", "Lora", Georgia, serif;
  font-weight: 600; font-size: 26px; letter-spacing: -0.01em; color: var(--texto);
}
.marca:hover { text-decoration: none; color: var(--texto); }
.cabecera-cta {
  display: inline-block; padding: 10px 20px; border-radius: 999px;
  background: var(--acento); color: var(--sobre-acento); font-weight: 600; font-size: 15px;
}
.cabecera-cta:hover { background: var(--acento-hover); color: var(--sobre-acento); text-decoration: none; }

main { max-width: 720px; margin: 0 auto; padding: 72px 24px 48px; }

.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--eyebrow);
  background: rgba(124, 108, 255, 0.16); padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
}
h1 {
  font-family: "Playfair Display", "Lora", Georgia, serif;
  font-weight: 700; font-size: clamp(38px, 6vw, 58px); line-height: 1.08;
  letter-spacing: -0.02em; margin: 0 0 18px;
}
.entradilla { font-size: 21px; color: var(--texto-2); margin: 0 0 44px; line-height: 1.5; }

.carta p { margin: 0 0 1.15em; }
.carta p.pausa { margin-top: 2em; }
.carta .firma { margin-top: 2.2em; color: var(--texto); }
.carta .firma span { display: block; font-family: "Playfair Display", "Lora", Georgia, serif; font-size: 24px; margin-top: 4px; }

.tarjeta {
  margin: 48px 0 20px; padding: 36px 32px;
  background: linear-gradient(180deg, var(--superficie) 0%, rgba(30, 28, 68, 0.6) 100%);
  border: 1px solid var(--borde); border-radius: 22px;
  box-shadow: 0 30px 80px -40px rgba(124, 108, 255, 0.35);
}
.tarjeta h2 {
  font-family: "Playfair Display", "Lora", Georgia, serif; font-weight: 700;
  font-size: 30px; line-height: 1.15; margin: 0 0 10px; letter-spacing: -0.01em;
}
.tarjeta .nota { color: var(--texto-2); font-size: 16px; margin: 0 0 22px; }
.campo { display: flex; gap: 10px; flex-wrap: wrap; }
.campo input[type="email"] {
  flex: 1 1 260px; min-width: 0; padding: 15px 18px; font: inherit; font-size: 17px;
  border-radius: 12px; border: 1px solid rgba(196, 182, 255, 0.25);
  background: var(--fondo-2); color: var(--texto); outline: none;
}
.campo input[type="email"]:focus { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.25); }
.campo input::placeholder { color: var(--texto-3); }
.boton {
  padding: 15px 26px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; font-size: 17px;
  background: var(--acento); color: var(--sobre-acento); cursor: pointer; white-space: nowrap;
}
.boton:hover { background: var(--acento-hover); }
.boton[disabled] { opacity: 0.6; cursor: wait; }
.consentimiento { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; font-size: 15px; color: var(--texto-2); }
.consentimiento input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--acento); flex: none; }
.consentimiento a { color: var(--eyebrow); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mensaje { margin: 16px 0 0; font-size: 16px; min-height: 1.5em; }
.mensaje.ok { color: var(--lima); }
.mensaje.error { color: var(--coral); }
.pie-form { text-align: center; color: var(--texto-2); font-size: 15px; margin: 0; }

.estado { text-align: center; padding: 40px 0; }
.estado h1 { font-size: clamp(32px, 5vw, 46px); }
.estado p { color: var(--texto-2); font-size: 19px; }

.legal h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 8px; }
.legal .fecha { color: var(--texto-3); font-size: 15px; margin-bottom: 36px; }
.legal h2 {
  font-family: "Playfair Display", "Lora", Georgia, serif; font-weight: 600;
  font-size: 24px; margin: 40px 0 10px; letter-spacing: -0.01em;
}
.legal p, .legal li { color: var(--texto-2); font-size: 17px; }
.legal p strong { color: var(--texto); font-weight: 600; }
.legal ul { padding-left: 22px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 16px; color: var(--texto-2); }
.legal th, .legal td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.legal th { color: var(--texto); font-weight: 600; }

footer { border-top: 1px solid var(--borde); background: var(--fondo-2); margin-top: 48px; }
.pie-int { max-width: 1120px; margin: 0 auto; padding: 36px 24px; display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; }
.pie-marca { font-family: "Playfair Display", "Lora", Georgia, serif; font-size: 22px; font-weight: 600; }
.pie-marca small { display: block; font-family: "Figtree", "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 400; color: var(--texto-3); margin-top: 4px; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; }
.pie-enlaces a { color: var(--texto-2); }
.pie-enlaces a:hover { color: var(--texto); }
.pie-legal { max-width: 1120px; margin: 0 auto; padding: 0 24px 28px; color: var(--texto-3); font-size: 13px; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  main { padding-top: 48px; }
  .tarjeta { padding: 28px 20px; }
  .cabecera-cta { display: none; }
}