/* Iglesia DTP · sistema de diseño compartido (landing, registro, panel).
   Blanco dominante; azul profundo para la estructura; dorado como acento fino. */
@font-face { font-family: "Jost"; src: url("../fonts/Jost.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --blanco: #ffffff; --fondo: #f6f7fa; --papel: #fbfaf7;
  --azul-900: #0c2142; --azul-800: #12305e; --azul-700: #1a4580; --azul-600: #2358a4; --azul-100: #e4ecf7; --azul-50: #f1f5fb;
  --oro: #b98a47; --oro-claro: #e2be86; --oro-texto: #8d6226; --oro-50: #fbf5ea;
  --ink: #0e1b2e; --ink-2: #4a5870; --ink-3: #6f7b90; --line: #e6e9f0; --line-2: #d5dae4;
  --ok: #1f7a5a; --ok-50: #e5f4ee; --warn: #94600f; --warn-50: #fbf0da; --bad: #b0344a; --bad-50: #f9e5e9;
  --r: 16px; --r-sm: 10px; --pill: 999px;
  --sombra: 0 1px 2px rgba(12, 33, 66, .04), 0 18px 40px -28px rgba(12, 33, 66, .22);
  --sombra-alta: 0 2px 4px rgba(12, 33, 66, .05), 0 30px 60px -30px rgba(12, 33, 66, .32);
  --f: "Jost", "Futura", "Century Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: clamp(18px, 5vw, 72px);
  --llama: #f08c00; --llama-claro: #ffb84d;          /* el naranja de la llama del logo */
  --estrella: #1a4580; --estrella-frio: #4f86d6; --estrella-calido: #f08c00;   /* campo de estrellas (tema claro) */
}
[data-theme="dark"] { --estrella: #dbe7fb; --estrella-frio: #9ec1ff; --estrella-calido: #ffc15e; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--blanco); color: var(--ink); font: 400 16px/1.6 var(--f); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; color: var(--azul-900); }
h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); } h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); } h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0; } a { color: var(--azul-600); text-underline-offset: 3px; }
img, svg { max-width: 100%; }
.muted { color: var(--ink-2); } .tenue { color: var(--ink-3); } .peq { font-size: .875rem; } .der { text-align: right; } .nw { white-space: nowrap; }
.eyebrow { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--oro-texto); }
.filete { width: 44px; height: 2px; background: var(--oro); border: 0; margin: 14px 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--azul-600); outline-offset: 2px; border-radius: 6px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: var(--pill); border: 1px solid var(--line-2); background: var(--blanco); color: var(--azul-900); font: 500 .95rem var(--f); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.btn:hover { background: var(--azul-50); border-color: var(--azul-100); }
.btn:active { transform: translateY(1px); }
.btn.principal { background: var(--azul-800); border-color: var(--azul-800); color: #fff; }
.btn.principal:hover { background: var(--azul-700); }
.btn.oro { background: var(--oro); border-color: var(--oro); color: #fff; } .btn.oro:hover { background: var(--oro-texto); border-color: var(--oro-texto); }
.btn.peligro { color: var(--bad); border-color: #e6bcc5; } .btn.peligro:hover { background: var(--bad-50); }
.btn.sm { padding: 6px 14px; font-size: .85rem; } .btn.bloque { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

label { display: block; font-weight: 500; font-size: .9rem; margin-bottom: 6px; color: var(--azul-900); }
.campo { margin-bottom: 16px; }
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--blanco); color: var(--ink); font: inherit; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul-600); box-shadow: 0 0 0 3px var(--azul-100); }
textarea { resize: vertical; }
.fila { display: flex; gap: 14px; flex-wrap: wrap; } .fila > * { flex: 1 1 150px; }
.marca-check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: .92rem; } .marca-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--azul-800); flex: none; }
.ayuda { font-size: .82rem; color: var(--ink-3); margin-top: 4px; }
.error-form { background: var(--bad-50); color: var(--bad); border-radius: var(--r-sm); padding: 10px 14px; font-size: .92rem; margin-bottom: 14px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.chip { display: inline-block; padding: 2px 11px; border-radius: var(--pill); font-size: .76rem; font-weight: 600; background: var(--azul-100); color: var(--azul-700); }
.chip.ok { background: var(--ok-50); color: var(--ok); } .chip.aviso { background: var(--warn-50); color: var(--warn); } .chip.mal { background: var(--bad-50); color: var(--bad); }
.chip.oro { background: var(--oro-50); color: var(--oro-texto); } .chip.gris { background: #eef0f4; color: var(--ink-2); }

.emblema { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--azul-800); color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: .06em; position: relative; }
.emblema::after { content: ""; position: absolute; inset: 3px; border-radius: 9px; border: 1px solid rgba(226, 190, 134, .65); }

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

/* logo y campo de estrellas */
.logo { display: block; width: var(--t, 64px); height: auto; aspect-ratio: 1; user-select: none; -webkit-user-drag: none; }
.logo-oscuro { display: none; } [data-theme="dark"] .logo-claro { display: none; } [data-theme="dark"] .logo-oscuro { display: block; }
.ficha-logo { display: inline-grid; place-items: center; width: var(--t, 46px); height: var(--t, 46px); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(12, 33, 66, .08), 0 8px 18px -10px rgba(12, 33, 66, .35); flex: none; }
.ficha-logo img { width: 76%; height: 76%; object-fit: contain; }
.con-estrellas { position: relative; isolation: isolate; overflow: hidden; }
.estrellas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.estrellas canvas { width: 100%; height: 100%; display: block; }
.con-estrellas > :not(.estrellas) { position: relative; z-index: 1; }