/* Lead magnet propio de Bestión · mismo sistema visual que Radar de Contenido
   (RADAR_CREATIVO/outputs/landing/public/assets/radar.css, tomado de www.bestion.cl):
   tokens de color, tipografías y componentes base copiados tal cual; los componentes de
   formulario (.campo, .checkbox-row, fieldset.grupo, #form-error, etc.) son nuevos porque acá
   los genera formulario-ui.js con esos nombres de clase (contrato compartido con landing-page/),
   no los de radar.css — pero usan la misma paleta y tipografía. */

:root {
  color-scheme: light;

  --crema: oklch(98.5% 0.020 104);
  --amarillo: oklch(93.1% 0.197 104);
  --violeta: oklch(65.4% 0.154 303);
  --naranja: oklch(79.7% 0.154 65);
  --marino: oklch(28.3% 0.020 243);
  --tinta: oklch(21.4% 0.013 244);
  --violeta-oscuro: oklch(38.2% 0.142 294);
  --error: oklch(42% 0.17 27);

  --display: 'Archivo', 'Arial Black', Arial, sans-serif;
  --acento: 'Arapey', Georgia, 'Times New Roman', serif;
  --texto: 'Open Sans', Arial, 'Helvetica Neue', sans-serif;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: clamp(3.5rem, 9vw, 7rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--crema);
  color: var(--tinta);
  font: 400 1.0625rem/1.55 var(--texto);
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }
img, svg { display: block; max-width: 100%; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
a:hover { text-decoration-thickness: 3px; }

:focus-visible { outline: 3px solid var(--violeta-oscuro); outline-offset: 3px; }

.wrap { width: min(100% - 2rem, 40rem); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.acento { font-family: var(--acento); font-style: italic; font-weight: 400; }

.titular {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 0.95;
  font-size: clamp(2rem, 6.5vw, 3.5rem);
}
.titular .acento { text-transform: none; letter-spacing: 0; font-size: 1.08em; }

/* HERO */
.hero { background: var(--amarillo); padding-block: 1.25rem var(--s-4); overflow: hidden; }
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.logo { display: block; line-height: 0; }
.logo img { width: clamp(64px, 9vw, 88px); height: auto; }

.lede { position: relative; margin-bottom: var(--s-4); }
.lede p { margin: 0; }
.lede .detalle { margin-top: var(--s-2); font-size: 1.0625rem; max-width: 44ch; }

/* Estrella decorativa — mismo símbolo y giro que radar.css, solo ambiental (aria-hidden) */
.estrella {
  position: absolute;
  top: -0.5rem;
  right: 0.5rem;
  width: clamp(36px, 6vw, 64px);
  height: auto;
  fill: var(--tinta);
  animation: girar 28s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Entrada escalonada del hero: cada elemento aparece con un pequeño delay tras el anterior.
   Solo corre una vez al cargar — no es una animación que el usuario vea cientos de veces. */
.entra {
  opacity: 0;
  transform: translateY(10px);
  animation: aparece 500ms var(--ease-out) both;
}
@keyframes aparece { to { opacity: 1; transform: translateY(0); } }
.top.entra { animation-delay: 0ms; }
.lede.entra { animation-delay: 70ms; }
#form-container.entra { animation-delay: 140ms; }

/* FORMULARIO — clases que genera formulario-ui.js, no tocar los nombres */
.form { display: grid; gap: var(--s-2); }

.campo { display: grid; gap: 0.375rem; }
.campo label { font-weight: 700; font-size: 0.9375rem; }
/* Regla del Acento Único (DESIGN.md): Arapey solo dentro de titulares, nunca en texto de UI
   suelto. "(opcional)" se diferencia con color y peso, no con la tipografía de acento. */
.opcional { font-family: var(--texto); font-style: normal; font-weight: 400; color: var(--marino); margin-left: 0.25rem; }
.ayuda { margin: 0; font-size: 0.8125rem; color: var(--marino); }

.campo input:not([type='checkbox']), .campo select {
  width: 100%;
  font: inherit;
  font-size: 1rem; /* 16px mínimo: evita el zoom automático en iOS */
  padding: 0.8125rem 0.875rem;
  background: var(--crema);
  color: var(--tinta);
  border: 2px solid var(--tinta);
  border-radius: 2px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.campo input[aria-invalid='true'], .campo select[aria-invalid='true'] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

.campo-error { margin: 0; color: var(--error); font-size: 0.875rem; font-weight: 700; }
.campo-error:not([hidden])::before { content: '! '; }

fieldset.grupo { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
fieldset.grupo legend { padding: 0; font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.25rem; }

.checkbox-row { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-size: 0.9375rem; }
.checkbox-row input { width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--tinta); }
.checkbox-row a { color: var(--violeta-oscuro); }

#form-error {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--error);
  background: color-mix(in oklch, var(--error) 12%, var(--crema));
  border-radius: 2px;
  padding: 0.75rem 0.875rem;
}
#form-error .btn-recargar {
  font: inherit;
  font-weight: 700;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
#form-error:focus-visible { outline-offset: 4px; }

#turnstile { min-height: 65px; }

.boton, #submit-btn {
  appearance: none;
  border: 2px solid var(--tinta);
  border-radius: 2px;
  background: var(--tinta);
  color: var(--crema);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1.0625rem 1.5rem;
  min-height: 3.25rem;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 160ms var(--ease-out);
}
.boton:hover, #submit-btn:hover { background: var(--violeta-oscuro); border-color: var(--violeta-oscuro); }
.boton:active, #submit-btn:active { transform: scale(0.97); }
#submit-btn[disabled] { opacity: 0.6; cursor: progress; }

.anti-spam { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--marino); text-align: center; }

.hp { position: absolute; left: -9999px; }

/* ESTADO FINAL (éxito / duplicado) — ocurre una sola vez por visita, justifica algo de delight.
   La animación arranca sola al pasar de display:none a block, sin necesitar @starting-style. */
#estado { display: none; text-align: center; padding-block: var(--s-4); }
#estado.visible { display: block; animation: aparece 400ms var(--ease-out) both; }
#estado h2 {
  margin: 0 0 var(--s-1);
  font-family: var(--display);
  font-weight: 900;
  text-transform: lowercase;
  font-size: clamp(2rem, 7vw, 3.25rem);
  letter-spacing: -0.02em;
}
#estado.error h2 { color: var(--error); }
#estado p { margin: 0; font-size: 1.0625rem; }

/* Botón hacia la web de Bestión (opcional, solo si CONFIG.WEB_URL tiene valor) */
.btn-web {
  display: block;
  margin-top: var(--s-3);
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--tinta);
  text-decoration: none;
  padding: 0.9375rem 1.25rem;
  border: 2px solid var(--tinta);
  border-radius: 2px;
}
.btn-web:hover { background: var(--tinta); color: var(--crema); }

/* Aviso de cookies de medición (solo aparece si hay LinkedIn Insight Tag configurado).
   Entra deslizando desde abajo (misma dirección de salida que tendría al cerrarse) — patrón de
   Sonner para toasts: la consistencia espacial hace que el gesto se sienta intuitivo. Arranca
   sola al quitarse el atributo hidden, sin @starting-style. */
#consent-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--marino);
  color: var(--crema);
  padding: var(--s-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  justify-content: center;
  font-size: 0.8125rem;
  z-index: 20;
}
#consent-bar:not([hidden]) { animation: subeDesdeAbajo 320ms var(--ease-out) both; }
@keyframes subeDesdeAbajo { from { transform: translateY(100%); } to { transform: translateY(0); } }
#consent-bar p { margin: 0; max-width: 32rem; }
#consent-bar a { color: var(--amarillo); }
#consent-bar .acciones { display: flex; gap: 0.5rem; }
#consent-bar button {
  font-family: var(--texto);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.5625rem 1rem;
  border-radius: 2px;
  cursor: pointer;
  border: 2px solid var(--crema);
}
/* Mismo tratamiento visual en los dos botones a propósito (P2 de la crítica de impeccable):
   el copy dice "puedes aceptar o rechazar, el contenido te llega igual" — un botón relleno y
   otro solo borde contradecía esa paridad real con una asimetría visual. */
#consent-aceptar, #consent-rechazar { background: transparent; color: var(--crema); }

/* BLOQUE "por qué existe esto" */
.bloque { padding-block: var(--s-4); }
.violeta { background: var(--violeta); color: var(--tinta); }

.puntos { margin: var(--s-3) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--tinta); }
.punto { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; padding-block: var(--s-2); border-bottom: 2px solid var(--tinta); }

/* Reveal al entrar en pantalla (lead-magnet.js agrega .en-vista con IntersectionObserver).
   Sin JS o sin soporte, .punto ya es visible por defecto (progressive enhancement). */
.punto.prep { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.punto.prep.en-vista { opacity: 1; transform: translateY(0); }
.punto.prep:nth-child(1) { transition-delay: 0ms; }
.punto.prep:nth-child(2) { transition-delay: 60ms; }
.punto.prep:nth-child(3) { transition-delay: 120ms; }
.punto .num {
  grid-row: span 2;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 0.85;
  color: var(--crema);
}
.punto h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.125rem; line-height: 1.2; }
.punto p { margin: 0; max-width: 46ch; }

/* PIE */
.pie { background: var(--marino); color: var(--crema); padding-block: var(--s-3); }
.pie .wrap { display: grid; gap: var(--s-1); }
.pie p { margin: 0; }
.pie nav { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; }
.pie a { display: inline-block; padding-block: 0.25rem; }
.pie :focus-visible { outline-color: var(--amarillo); }

/* PÁGINAS SIMPLES (política de privacidad) — mismas clases que radar.css */
.simple { padding-block: var(--s-4); }
.simple .cabecera { margin-bottom: var(--s-3); }
.legal .cuerpo { max-width: 42rem; }
.legal h1 { margin: 0 0 0.5rem; font-family: var(--display); font-weight: 900; text-transform: lowercase; font-size: clamp(2rem, 7vw, 3rem); letter-spacing: -0.02em; }
.legal .fecha { font-family: var(--texto); font-style: normal; font-size: 0.9375rem; margin: 0 0 var(--s-3); color: var(--marino); }
.legal h2 { margin: var(--s-3) 0 var(--s-1); font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.legal p, .legal li { font-size: 1.0625rem; max-width: none; }
.legal ul { margin: 0 0 var(--s-2); padding-left: 1.25rem; }
.legal li { margin-bottom: 0.4rem; }

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