/*
 * El sitio de WANIFY.
 *
 * Los colores y la tipografía NO se inventan aquí: son los de la marca, los
 * mismos que en `apps/panel/src/styles/tokens.css`. El morado de acción en
 * claro es #6D22D1 y no el de marca #8F4AF2, porque el de marca da 4.74:1 sobre
 * blanco y se queda corto; este da 7.50:1. El fondo oscuro es #060509, casi
 * negro pero con un rastro de morado: el negro puro produce halo al leer texto
 * claro.
 */

:root {
  color-scheme: light;

  /* Primitivas de marca */
  --morado-marca: #8F4AF2;  /* el de las letras FY del logotipo */
  --morado-accion: #6D22D1; /* 7.50:1 sobre blanco */
  --morado-claro: #A575F7;  /* 6.28:1 sobre el fondo oscuro */
  --negro-marca: #060509;

  /* Neutros con un sesgo mínimo hacia el morado: un gris puro al lado de esta
     marca se lee como descuido. */
  --papel: #FFFFFF;
  --papel-hundido: #FAF9FC;
  --tinta: #14121A;
  --tinta-suave: #55505F;
  --linea: #E8E5EE;

  --accion: var(--morado-accion);
  --fondo: var(--papel);
  --texto: var(--tinta);
  --texto-suave: var(--tinta-suave);
  --borde: var(--linea);
  --superficie: var(--papel-hundido);

  --peso-titulo: 600;
  --peso-ui: 500;
  --peso-texto: 400;

  --ancho: 1080px;
  --ancho-texto: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo: var(--negro-marca);
    --texto: #F4F2F7;
    --texto-suave: #A9A4B5;
    --borde: #241F2E;
    --superficie: #0E0C14;
    --accion: var(--morado-claro);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Poppins', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: var(--peso-texto);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: var(--peso-titulo);
  line-height: 1.2;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; }
p { margin: 0; }

a { color: var(--accion); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accion);
  outline-offset: 3px;
  border-radius: 3px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 24px;
}

/* --------------------------------------------------------------- cabecera */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
}
.cabecera img { height: 34px; width: auto; display: block; }
.cabecera nav { display: flex; gap: 22px; font-size: 0.92rem; font-weight: var(--peso-ui); }
.cabecera nav a { color: inherit; opacity: 0.78; }
.cabecera nav a:hover { opacity: 1; }

/* ------------------------------------------------------------------- héroe
 *
 * Oscuro en los dos modos, como `.card-dark` en el panel: no es el tema
 * oscuro, es una pieza oscura dentro de un tema claro. Lleva el resplandor
 * morado arriba a la derecha que pide la identidad, y la trama de ondas al
 * 5,5% — la misma proporción que en el panel, para que no ensucie el texto.
 */
.heroe {
  background:
    radial-gradient(900px 460px at 82% -8%, rgba(143, 74, 242, 0.28), transparent 62%),
    var(--negro-marca);
  color: #F4F2F7;
  position: relative;
  overflow: hidden;
}
.heroe::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'><path d='M0 60 C 40 20, 80 100, 120 60 S 200 20, 240 60' fill='none' stroke='white' stroke-width='2'/><path d='M0 90 C 40 50, 80 130, 120 90 S 200 50, 240 90' fill='none' stroke='white' stroke-width='2'/></svg>");
  background-size: 240px 120px;
  pointer-events: none;
}
.heroe > * { position: relative; }
.heroe .cabecera nav a,
.heroe .cabecera { color: #F4F2F7; }

.heroe-cuerpo { padding-block: clamp(56px, 9vw, 104px); max-width: 760px; }
.heroe .sello {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: var(--peso-ui);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--morado-claro);
  margin-bottom: 18px;
}
.heroe p.entrada {
  margin-top: 20px;
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  color: #CFCAD9;
  max-width: 60ch;
}
.heroe .acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.boton {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: var(--peso-ui);
  font-size: 0.95rem;
  background: var(--morado-claro);
  color: var(--negro-marca);
  border: 1px solid transparent;
}
.boton:hover { text-decoration: none; background: #B68CF9; }
.boton.secundario { background: transparent; color: #F4F2F7; border-color: #3A3345; }
.boton.secundario:hover { background: #17141F; }

/* --------------------------------------------------------------- secciones */
.seccion { padding-block: clamp(48px, 7vw, 76px); }
.seccion + .seccion { border-top: 1px solid var(--borde); }
.rotulo {
  font-size: 0.78rem;
  font-weight: var(--peso-ui);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 12px;
}
.prosa { max-width: var(--ancho-texto); display: flex; flex-direction: column; gap: 18px; }
.prosa p { color: var(--texto-suave); }

/* Los cuatro módulos: una lista con filetes, no cuatro tarjetas. Son partes de
   una misma herramienta, y cuatro cajas iguales las haría parecer productos
   sueltos. */
.piezas { display: flex; flex-direction: column; margin-top: 32px; }
.pieza {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 8px 40px;
  padding-block: 26px;
  border-top: 1px solid var(--borde);
}
.pieza:last-child { border-bottom: 1px solid var(--borde); }
.pieza h3 { margin: 0; }
.pieza p { color: var(--texto-suave); font-size: 0.97rem; }
@media (max-width: 720px) {
  .pieza { grid-template-columns: 1fr; gap: 6px; }
}

.datos { display: flex; flex-wrap: wrap; gap: 12px 48px; margin-top: 24px; }
.dato { display: flex; flex-direction: column; gap: 2px; }
.dato span { font-size: 0.8rem; color: var(--texto-suave); font-weight: var(--peso-ui); }
.dato strong { font-weight: var(--peso-ui); font-size: 0.98rem; }

/* ------------------------------------------------------------------- legal */
.legal { padding-block: clamp(40px, 6vw, 64px); }
.legal .prosa { gap: 14px; }
.legal h2 { margin-top: 34px; }
.legal h2:first-of-type { margin-top: 24px; }
.legal ul { margin: 0; padding-left: 22px; color: var(--texto-suave); display: flex; flex-direction: column; gap: 8px; }
.legal .fecha { font-size: 0.88rem; color: var(--texto-suave); }

/* Lo que falta por rellenar se ve. Publicar un sitio legal con un hueco es
   peor que no publicarlo. */
.pendiente {
  background: #FFF3CD;
  color: #6B4E00;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: var(--peso-ui);
  font-size: 0.92em;
}

/* --------------------------------------------------------------- pie */
.pie {
  border-top: 1px solid var(--borde);
  padding-block: 36px 48px;
  font-size: 0.9rem;
  color: var(--texto-suave);
}
.pie .filas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.pie nav { display: flex; gap: 20px; flex-wrap: wrap; }
.pie a { color: inherit; }
.pie .razon { font-weight: var(--peso-ui); color: var(--texto); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}