/* Public landing page.
 *
 * It sits apart from ravn.css on purpose: ravn.css is the PANEL's system and
 * must not fatten up with things seen only once, before logging in. Not one
 * new colour is defined here — everything comes from ravn.css's variables,
 * which is the one in charge. If the brand changes shade, it changes in one
 * place and this follows it.
 *
 * Exception: the five content sections (Para quién … FAQ) carry the owner's
 * redesign values as named --lp-* variables on .lp-sec, in one place.
 *
 * The landing used to be written with loose styles in the HTML and its own
 * hand-made palette, half a shade off the panel's: whoever signed up saw two
 * different blacks one after the other. This brings them together.
 */

/* ── Top notice and bar ───────────────────────────────────────────────────── */

.lp-aviso {
  background: var(--gold);
  color: var(--bg);
  text-align: center;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  background: var(--bg);   /* fallback if the browser does not do color-mix */
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.lp-marca { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.lp-marca img { height: auto; display: block; }
.lp-marca span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
}
.lp-nav-links { display: flex; align-items: center; gap: 26px; font-size: 14.5px; }
.lp-nav-links .btn { white-space: nowrap; }
/* The bar's button says less on small screens: in full it broke into two
   lines inside the button. */
.lp-corto { display: none; }
.lp-nav-links a { color: var(--ink-2); }
.lp-nav-links a:hover { color: var(--gold); }
.lp-nav-links .btn-gold { color: var(--bg); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.lp-hero {
  position: relative;
  /* The background raven peeks out on the right on purpose, but if nobody
     clips it the page becomes wider than the window and can be dragged
     sideways. It is clipped here and not on the <body>: that way the rest of
     the page keeps its normal scroll. */
  overflow: hidden;
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 24px 88px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}
/* The huge raven behind the text: branding without getting in the way of reading. */
.lp-hero-marca {
  position: absolute;
  right: -160px;
  top: -40px;
  width: 640px;
  height: auto;
  opacity: 0.05;
  pointer-events: none;
}
.lp-hero-txt { flex: 1 1 460px; min-width: 280px; position: relative; z-index: 1; }
.lp-hero-art {
  flex: 0 1 360px;
  min-width: 280px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 24px;
}
.lp-pill .dot { width: 6px; height: 6px; background: var(--gold); }

.lp-h1 {
  font-size: clamp(36px, 5.5vw, 60px);
  line-height: 1.08;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lp-h1 em { color: var(--gold); font-style: normal; }
.lp-hero-txt p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 520px;
  text-wrap: pretty;
}

.lp-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.lp-cta-grande { padding: 15px 30px; font-size: 16.5px; box-shadow: 0 0 40px var(--gold-dim); }
.lp-nota { font-size: 13.5px; color: var(--ink-3); }

.lp-cifras { display: flex; gap: 28px; margin-top: 44px; flex-wrap: wrap; }
.lp-cifra strong {
  display: block;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  color: var(--gold);
}
.lp-cifra span { font-size: 13px; color: var(--ink-3); }

/* ── Sample phone ─────────────────────────────────────────────────────────── */

.lp-hora {
  font-family: var(--display);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lp-tel {
  width: 100%;
  max-width: 320px;   /* no fixed width: at a 320px screen it overflowed */
  border-radius: 38px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 14px;
  box-shadow: var(--shadow), 0 0 60px var(--gold-dim);
  animation: lpFlota 6s ease-in-out infinite;
}
.lp-tel-pantalla { border-radius: 26px; background: var(--surface-2); overflow: hidden; }
.lp-tel-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
}
.lp-tel-foto {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.lp-tel-foto img { width: 20px; height: auto; display: block; }
.lp-tel-quien { flex: 1; font-weight: 600; font-size: 14px; }
.lp-tel-quien small { display: block; font-size: 11.5px; font-weight: 400; color: var(--good); }
.lp-tel .cd {
  padding: 16px 12px 18px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

@keyframes lpFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ── Sections redesign (Para quién, Cómo funciona, Funciones, Precio, FAQ) ── */

/* Los valores del diseño del dueño (29 sep). Viven aquí, con nombre, y no
   sueltos por las reglas: el día que cambie un tono se cambia una vez. */
.lp-sec {
  --lp-fondo: #0c0c0f; --lp-alt: #101014; --lp-corte: #1c1c22;
  --lp-tarjeta: #15151a; --lp-borde: #23232b; --lp-divisor: #26262e;
  --lp-oro: #c9a15a; --lp-oro-hi: #e0bd7a;
  --lp-texto: #f3f0e8; --lp-texto-2: #a19d94; --lp-apagado: #5f5c57; --lp-gris: #8a867f;
  --lp-crema: #f1ebdf;
  padding: 104px 32px;
  background: var(--lp-fondo);
  border-top: 1px solid var(--lp-corte);
  color: var(--lp-texto);
}
.lp-sec--alt { background: var(--lp-alt); }
.lp-wrap { max-width: 1200px; margin: 0 auto; }

.lp-cab { max-width: 640px; margin-bottom: 56px; }
.lp-kicker {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  color: var(--lp-oro, var(--gold)); letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 16px;
}
.lp-h2 {
  font-family: var(--display); font-weight: 700; margin: 0;
  font-size: clamp(34px, 5.4vw, 48px); line-height: 1.05; letter-spacing: -0.02em;
}
.lp-lead { color: var(--lp-texto-2); font-size: 17px; line-height: 1.55; margin: 16px 0 0; }

/* El cuervo es negro: SIEMPRE sobre crema, nunca sobre el fondo oscuro. */
.lp-crema { background: var(--lp-crema); padding: 14px; display: flex; min-width: 0; }
.lp-crema img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lp-crema--43 { aspect-ratio: 4 / 3; border-radius: 18px; border: 1px solid var(--lp-borde); }

/* ── Para quién es: escaparate ────────────────────────────────────────────── */

.lp-escaparate { display: flex; flex-wrap: wrap; gap: 32px; }
.lp-vitrina {
  flex: 1.8 1 520px; min-width: 0; min-height: 560px; position: relative; overflow: hidden;
  border-radius: 24px; background: #16161c; border: 1px solid var(--lp-borde);
}
.lp-vitrina > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s ease;
}
.lp-vitrina > img.on { opacity: 1; }
.lp-velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,12,15,.55), transparent 55%); }

.lp-minichat {
  position: absolute; top: 32px; left: 32px; right: 32px; max-width: 320px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.lp-minichat > * { margin: 0; animation: lpEntra .45s ease both; }
.lp-mc-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  background: rgba(12,12,15,.75); font-size: 13px; color: var(--lp-texto);
}
.lp-mc-punto { width: 7px; height: 7px; border-radius: 50%; background: #3ecf8e; flex: none; }
.lp-mc-cli, .lp-mc-bot { padding: 10px 14px; font-size: 14.5px; line-height: 1.45; max-width: 100%; }
.lp-mc-cli { align-self: flex-end; background: #1a6b52; border-radius: 14px 14px 4px 14px; animation-delay: .25s; }
.lp-mc-bot {
  background: rgba(22,22,28,.94); border: 1px solid #2a2a33; border-radius: 14px 14px 14px 4px;
  animation-delay: .9s;
}
@keyframes lpEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.lp-giros { flex: 1 1 300px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.lp-giro {
  position: relative; display: flex; gap: 16px; align-items: baseline; width: 100%;
  padding: 18px 0; background: none; border: 0; border-top: 1px solid var(--lp-borde);
  color: var(--lp-gris); font: inherit; text-align: left; cursor: pointer;
}
.lp-giros li:last-child .lp-giro { border-bottom: 1px solid var(--lp-borde); }
.lp-giro:focus-visible { outline: 2px solid var(--lp-oro); outline-offset: 4px; border-radius: 4px; }
.lp-giro-num { font-size: 13px; color: var(--lp-apagado); font-variant-numeric: tabular-nums; flex: none; }
.lp-giro-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lp-giro-nombre { font-family: var(--display); font-size: 20px; font-weight: 600; transition: color .2s; }
.lp-giro-linea { display: none; font-size: 15px; line-height: 1.5; color: var(--lp-texto-2); }
.lp-giro:hover .lp-giro-nombre { color: var(--lp-texto); }
.lp-giro.on .lp-giro-nombre { color: var(--lp-texto); }
.lp-giro.on .lp-giro-num { color: var(--lp-oro); }
.lp-giro.on .lp-giro-linea { display: block; }
/* La barra de la fila activa se llena en 5 s y, al terminar, pasa a la
   siguiente (landing.js escucha su `animationend`): el reloj ES la barra, y
   pausarla pausa todo. Se pausa con el ratón encima de la FOTO (no de la lista:
   quien acaba de picar una fila deja el ratón ahí y parecía descompuesto) y
   con el foco del teclado dentro. En pantallas táctiles no hay pausa por
   hover: tras tocar, el :hover se queda pegado y ya no rotaba nunca. */
.lp-barra {
  position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--lp-oro); transform: scaleX(0); transform-origin: left;
}
.lp-giro.on .lp-barra { animation: lpLlena 5s linear forwards; }
.lp-escaparate:has(:focus-visible) .lp-barra { animation-play-state: paused; }
@media (hover: hover) {
  .lp-vitrina:hover ~ .lp-giros .lp-barra { animation-play-state: paused; }
}
@keyframes lpLlena { to { transform: scaleX(1); } }

/* ── Cómo funciona ────────────────────────────────────────────────────────── */

.lp-pasos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px;
}
.lp-paso-num { display: block; margin: 22px 0 8px; font-size: 14px; color: var(--lp-oro); font-variant-numeric: tabular-nums; }
.lp-paso h3 { font-family: var(--display); font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.lp-paso p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--lp-texto-2); }

/* ── Funciones ────────────────────────────────────────────────────────────── */

.lp-funciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 20px; }
.lp-funcion {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 260px;
  background: var(--lp-tarjeta); border: 1px solid var(--lp-borde); border-radius: 18px; overflow: hidden;
}
/* La imagen no da el alto de la tarjeta (lo da el texto, mínimo 260 px): así
   no salta cuando termina de cargar. */
.lp-funcion .lp-crema { position: relative; }
.lp-funcion .lp-crema img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
.lp-funcion-txt { padding: 28px; align-self: start; }
.lp-funcion h3 { font-family: var(--display); font-size: 20px; font-weight: 600; margin: 0 0 10px; }
.lp-funcion p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--lp-texto-2); }

/* ── Precio ───────────────────────────────────────────────────────────────── */

.lp-plan {
  display: flex; flex-wrap: wrap; overflow: hidden;
  border-radius: 24px; border: 1px solid #2e2a22; background: var(--lp-tarjeta);
}
.lp-plan-precio {
  flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; padding: 44px 40px;
  background: radial-gradient(120% 100% at 0% 0%, #2a2317, #17161a 60%);
  border-right: 1px solid #2e2a22;
}
.lp-plan-marca { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--lp-oro); }
.lp-plan-lema { margin-top: 6px; color: var(--lp-texto-2); font-size: 15px; }
.lp-plan-cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 28px 0 36px; }
.lp-monto {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  font-size: clamp(72px, 19vw, 104px);
}
.lp-periodo { font-size: 16px; color: var(--lp-texto-2); }
.lp-plan-accion { margin-top: auto; }
.lp-plan-btn {
  display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 12px;
  background: var(--lp-oro); color: #14120d; font-weight: 700; font-size: 16px; transition: background .15s;
}
.lp-plan-btn:hover { background: var(--lp-oro-hi); color: #14120d; }
.lp-plan-btn:focus-visible { outline: 2px solid var(--lp-oro-hi); outline-offset: 3px; }
.lp-plan-accion p { margin: 12px 0 0; text-align: center; font-size: 13.5px; color: var(--lp-texto-2); }

.lp-incluye { flex: 1.6 1 440px; min-width: 0; padding: 40px 44px; }
.lp-incluye-tit { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-gris); margin-bottom: 8px; }
.lp-incluye ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); column-gap: 32px;
}
.lp-incluye li {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px 0;
  border-top: 1px solid var(--lp-divisor); font-size: 15px; line-height: 1.5;
}
.lp-incluye li.lp-ancho { grid-column: 1 / -1; }
.lp-check {
  flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(201,161,90,.14); color: var(--lp-oro);
}
.lp-check svg { width: 12px; height: 12px; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.lp-faq-cols { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.lp-faq-lado { flex: 1 1 300px; min-width: 0; position: sticky; top: 96px; }
.lp-pill-btn {
  display: inline-flex; align-items: center; height: 48px; padding: 0 22px; margin-top: 28px;
  border-radius: 999px; border: 1px solid #3a342a; color: var(--lp-texto); font-weight: 500;
  transition: border-color .15s, color .15s;
}
.lp-pill-btn:hover, .lp-pill-btn:focus-visible { border-color: var(--lp-oro); color: var(--lp-oro); }
.lp-pill-btn:focus-visible { outline: 2px solid var(--lp-oro); outline-offset: 3px; }

.lp-faq { flex: 2 1 520px; min-width: 0; border-bottom: 1px solid var(--lp-divisor); }
.lp-faq-item { border-top: 1px solid var(--lp-divisor); }
.lp-faq-item h3 { margin: 0; font: inherit; }
.lp-faq-item button {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 24px 0;
  background: none; border: 0; color: #d6d2c9; font: inherit; text-align: left; cursor: pointer;
}
.lp-faq-item button:focus-visible { outline: 2px solid var(--lp-oro); outline-offset: 4px; border-radius: 4px; }
.lp-faq-num { width: 26px; flex: none; font-size: 13px; color: var(--lp-apagado); font-variant-numeric: tabular-nums; }
.lp-faq-q { flex: 1; min-width: 0; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.3; }
.lp-faq-mas {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--lp-divisor);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lp-oro); font-size: 20px; line-height: 1; transition: transform .3s, border-color .3s;
}
.lp-faq-item.open button { color: var(--lp-texto); }
.lp-faq-item.open .lp-faq-num { color: var(--lp-oro); }
.lp-faq-item.open .lp-faq-mas { transform: rotate(45deg); border-color: var(--lp-oro); }
/* Alto animado sin medir nada en JS: la fila de la rejilla va de 0fr a 1fr.
   Cerrada queda `visibility: hidden`, que la saca del lector y del tabulador. */
.lp-faq-resp {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .3s ease, visibility 0s linear .3s;
}
.lp-faq-item.open .lp-faq-resp { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s ease; }
.lp-faq-resp > div { overflow: hidden; }
.lp-faq-resp p { margin: 0; padding: 0 52px 26px 42px; font-size: 16px; line-height: 1.6; color: var(--lp-texto-2); }

/* ── Sections: small screens and reduced motion ───────────────────────────── */

@media (max-width: 843px) {
  /* El precio y la lista ya van uno sobre otro: la línea pasa abajo. */
  .lp-plan-precio { border-right: 0; border-bottom: 1px solid #2e2a22; }
}
@media (max-width: 760px) {
  .lp-sec { padding: 72px 20px; }
  .lp-cab { margin-bottom: 40px; }
  .lp-vitrina { min-height: 420px; }
  .lp-minichat { top: 20px; left: 20px; right: 20px; }
  .lp-plan-precio { padding: 32px 24px; }
  .lp-incluye { padding: 28px 24px; }
  .lp-faq-lado { position: static; }
  .lp-faq-resp p { padding-right: 0; }
}
@media (max-width: 600px) {
  .lp-funcion { grid-template-columns: minmax(0, 1fr); }
  .lp-funcion .lp-crema { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-vitrina > img, .lp-faq-resp, .lp-faq-mas, .lp-giro-nombre, .lp-plan-btn { transition: none; }
  .lp-minichat > * { animation: none; }
  /* Sin movimiento no rota sola (no hay animación que termine): se cambia a mano. */
  .lp-giro.on .lp-barra { animation: none; transform: scaleX(1); }
}

/* ── Closing ──────────────────────────────────────────────────────────────── */

.lp-cierre {
  background: var(--bg);
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--gold) 9%, var(--bg)) 0%, var(--bg) 65%);
  padding: 96px 24px;
  border-top: 1px solid var(--line-soft);
}
.lp-cierre .lp-wrap { max-width: 520px; text-align: center; }
.lp-cierre img { width: 52px; height: auto; margin-bottom: 20px; }
.lp-cierre h2 { font-size: clamp(28px, 3.5vw, 38px); font-weight: 700; margin: 0 0 12px; }
.lp-cierre p { color: var(--ink-2); margin: 0 0 36px; font-size: 16px; }
.lp-cierre .btn { padding: 17px 40px; font-size: 17px; box-shadow: 0 0 40px var(--gold-dim); }
.lp-letra-chica { font-size: 12.5px; color: var(--ink-3); margin-top: 18px !important; }

.lp-pie {
  border-top: 1px solid var(--line-soft);
  padding: 36px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}
.lp-pie .lp-marca span { font-size: 15px; }
.lp-pie-links { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 13.5px; }
.lp-pie-links a { color: var(--ink-2); }
.lp-pie-links a:hover { color: var(--gold); }
.lp-letra-chica a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.lp-letra-chica a:hover { color: var(--gold); }

/* ── Términos y aviso de privacidad ───────────────────────────────────────── */

.lp-legal { padding: 64px 24px 88px; }
.lp-legal article { max-width: 720px; margin: 0 auto; color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.lp-legal h1 { color: var(--ink); font-size: clamp(30px, 4vw, 42px); font-weight: 700; line-height: 1.15; margin: 0 0 14px; }
.lp-legal h2 { color: var(--ink); font-size: 21px; font-weight: 700; line-height: 1.3; margin: 42px 0 12px; }
.lp-legal p { margin: 0 0 14px; }
.lp-legal ul, .lp-legal ol { margin: 0 0 16px; padding-left: 22px; }
.lp-legal li { margin-bottom: 6px; }
.lp-legal strong { color: var(--ink); font-weight: 600; }
.lp-legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* ── Small screens ────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .lp-sec { padding: 64px 20px; }
  .lp-hero { padding: 48px 20px 64px; gap: 40px; }
  /* The section anchors do not fit next to the buttons: on mobile you reach
     them by scrolling, and what cannot be missing is logging in or signing up. */
  .lp-nav-links .lp-ancla { display: none; }
  .lp-nav-links { gap: 16px; }
  .lp-largo { display: none; }
  .lp-corto { display: inline; }
  .lp-hero-marca { display: none; }
  .lp-cifras { gap: 20px; }
  .lp-legal { padding: 40px 20px 64px; }
  .lp-legal article { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-tel { animation: none; }
}