/* =========================================================================
   PL21 KIT WEB · la marca en cualquier página que ve un lead o un cliente.
   Dueño: brand/web/. Se copia a cada app con `python -X utf8 brand/sync_web_kit.py`.
   NO se edita la copia de una app: se edita aquí y se vuelve a sincronizar.

   Tres reglas que no se negocian (brand/BRAND_GUIDELINES.md):
     1. Serif SOLO en h1, h2 y UNA frase de remate por sección. Las cifras van en mono.
        Serif en todo parece "un Word hecho por un abuelito".
     2. Botón principal en tinta, no en azul. El azul es para detalles.
     3. Nada depende de una animación para verse (red de 3.5 s en pl21-kit.js).
   ========================================================================= */
@import url("pl21.tokens.css");

@font-face {
  font-family: "PL21 Serif";
  src: url("pl21-serif.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --pl-serif: "PL21 Serif", Georgia, "Times New Roman", serif;
  --pl-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --pl-mono: "JetBrains Mono", ui-monospace, monospace;
  --pl-cruz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg stroke='%231A1A1A' stroke-width='1' opacity='0.45' fill='none'%3E%3Cline x1='13' y1='0' x2='13' y2='26'/%3E%3Cline x1='0' y1='13' x2='26' y2='13'/%3E%3Ccircle cx='13' cy='13' r='6'/%3E%3C/g%3E%3C/svg%3E");
  --pl-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- 1. Tipografía: tres trabajos distintos ---------- */
.pl-h1, .pl-h2, .pl-remate { font-family: var(--pl-serif); font-weight: 500; letter-spacing: -0.015em; text-wrap: balance; }
.pl-h1 { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.04; }
.pl-h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; }
.pl-remate { font-size: clamp(19px, 2vw, 24px); line-height: 1.4; }
.pl-eyebrow { font-family: var(--pl-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-secondary); }
.pl-num { font-family: var(--pl-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---------- 2. Botones ---------- */
.pl-btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  font-family: var(--pl-sans); font-weight: 600; font-size: 16px; padding: 14px 22px;
  background: var(--pl-ink); color: var(--pl-white); border: 1px solid var(--pl-ink);
  border-radius: var(--pl-radius-button);
  transition: background 160ms var(--pl-ease-standard), transform 120ms var(--pl-ease-standard);
}
.pl-btn:hover { background: var(--pl-black); }
.pl-btn:active { transform: scale(0.98); }
.pl-btn--ghost { background: var(--pl-white); color: var(--pl-ink); border-color: var(--border); }
.pl-btn--ghost:hover { background: var(--pl-white); border-color: var(--pl-ink); }
/* La señal dentro del botón: SOLO en el botón que lleva a la llamada. Una marca por pantalla. */
.pl-btn--senal::before {
  content: ""; width: 15px; height: 16px; flex: none; margin-right: -2px; background: currentColor; opacity: 0.55;
  -webkit-mask: var(--pl-mark, url("pl21-mark-sm-black.svg")) center / contain no-repeat;
  mask: var(--pl-mark, url("pl21-mark-sm-black.svg")) center / contain no-repeat;
  transition: opacity 200ms, transform 300ms var(--pl-ease-out);
}
.pl-btn--senal:hover::before { opacity: 1; transform: scale(1.08); }

/* ---------- 3. La lámina (capa editorial) ---------- */
.pl-lamina { position: relative; overflow: hidden; background: var(--pl-white); border: 1px solid var(--border); border-radius: var(--pl-radius-card); padding: 48px 36px 36px; }
.pl-lamina::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--pl-grano) repeat; background-size: 280px; opacity: 0.12; mix-blend-mode: multiply; }
.pl-lamina__plancha { position: absolute; inset: 18px; border: 1px solid rgba(26, 26, 26, 0.14); pointer-events: none; }
.pl-lamina__cruz { position: absolute; width: 22px; height: 22px; background: var(--pl-cruz) center / contain no-repeat; pointer-events: none; }
.pl-lamina__cruz.c1 { left: 7px; top: 7px; } .pl-lamina__cruz.c2 { right: 7px; top: 7px; }
.pl-lamina__cruz.c3 { left: 7px; bottom: 7px; } .pl-lamina__cruz.c4 { right: 7px; bottom: 7px; }
.pl-lamina figure { position: relative; margin: 0; }
.pl-lamina img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.pl-pie { margin-top: 16px; text-align: center; font-family: var(--pl-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-secondary); }

/* ---------- 4. Regla de tics: progreso como instrumento, no como barra de app ---------- */
.pl-regla { display: flex; align-items: flex-end; gap: 0; justify-content: space-between; height: 10px; }
.pl-regla i { display: block; width: 1px; height: 5px; background: var(--pl-steel); transition: background 300ms, height 300ms var(--pl-ease-out); }
.pl-regla i:nth-child(5n + 1) { height: 10px; }
.pl-regla i.on { background: var(--pl-ink); }

/* ---------- 5. Movimiento ----------
   El contenido parte VISIBLE. Solo cuando pl21-kit.js pone .pl-js en <html> se esconde
   lo que va a entrar, y la red lo revela todo a los 3.5 s pase lo que pase. */
.pl-js [data-pl-rev] { opacity: 0; transform: translateY(18px); transition: opacity 650ms var(--pl-ease-out), transform 650ms var(--pl-ease-out); transition-delay: calc(var(--pl-orden, 0) * 80ms); }
.pl-js [data-pl-rev="3d"] { transform: perspective(900px) rotateX(-14deg) translateY(26px); transform-origin: 50% 120%; transition-duration: 620ms, 820ms; transition-timing-function: var(--pl-ease-out), cubic-bezier(0.18, 0.86, 0.26, 1); }
.pl-js [data-pl-rev].pl-in { opacity: 1; transform: none; }

/* Tarjeta con relieve: se inclina siguiendo el cursor, con un brillo que la sigue y
   capas que salen del plano (data-pl-z). Solo con ratón: con el dedo se siente rota. */
/* La transformación SOLO existe bajo el cursor: así no pisa la de entrada (data-pl-rev, .rv)
   ni ninguna otra del elemento. Dos transformaciones del mismo nodo se pelean. */
[data-pl-tilt] { transform-style: preserve-3d; position: relative; transition: transform 320ms var(--pl-ease-out), opacity 650ms var(--pl-ease-out), border-color 260ms, box-shadow 320ms; }
[data-pl-tilt].pl-tilt-on:hover { transform: perspective(1000px) rotateX(var(--pl-rx, 0deg)) rotateY(var(--pl-ry, 0deg)) translateY(-2px); }
[data-pl-tilt].pl-tilt-on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 280ms; background: radial-gradient(260px circle at var(--pl-mx, 50%) var(--pl-my, 50%), rgba(0, 71, 255, 0.09), rgba(0, 71, 255, 0) 62%); }
[data-pl-tilt].pl-tilt-on:hover::after { opacity: 1; }
[data-pl-tilt] [data-pl-z] { transition: transform 320ms var(--pl-ease-out); }
[data-pl-tilt].pl-tilt-on:hover [data-pl-z] { transform: translateZ(var(--pl-z, 20px)); }

/* El fondo de ruido que se ordena (placa de Chladni). Solo en los bordes: donde se lee, no molesta. */
.pl-chladni { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 52%, transparent 52%, #000 92%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 52%, transparent 52%, #000 92%); }

@media (prefers-reduced-motion: reduce) {
  .pl-js [data-pl-rev] { opacity: 1; transform: none; transition: none; }
  [data-pl-tilt] { transform: none; transition: none; }
}