/* EDIF · Círculo Cercano · acceso y panel (ITSMO) · v1 · 26-10-2026 · sale de la maqueta aprobada (circulo-panel/maqueta)
   Identidad tomada de la propia herramienta de carteras de EDIF (mismos tokens): azul marino, azul EDIF, Anton para los titulares,
   Plus Jakarta Sans para encabezados e Inter para el texto. Normas de Ale: cuerpo 17 px, nada por debajo de 15 px, grises ≥ 6,5:1.
   Fuentes alojadas aquí (fuentes/), sin Google. */
@font-face { font-family: 'Anton'; font-weight: 400; font-display: swap; src: url(fuentes/anton-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url(fuentes/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url(fuentes/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url(fuentes/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-display: swap; src: url(fuentes/plus-jakarta-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-display: swap; src: url(fuentes/plus-jakarta-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-display: swap; src: url(fuentes/plus-jakarta-sans-latin-800-normal.woff2) format('woff2'); }
:root {
  color-scheme: dark;
  --bg0: #00041D; --bg1: #00082E; --bg2: #01113C; --bg3: #062051;
  --panel: rgba(4, 16, 46, .78); --solid: #051640;
  --line: rgba(61, 135, 249, .20); --line-2: rgba(61, 135, 249, .40); --line-3: rgba(61, 135, 249, .62);
  --ink: #FFFFFF; --ink-1: #EAF3FF; --ink-2: #B3C5E3; --ink-3: #8299C0;
  --blue: #3D87F9; --blue-hi: #7FB2FF; --blue-lo: #2B6FE0;
  --ok: #43D18A; --bad: #FF7A70; --bad-bg: rgba(255, 122, 112, .11); --bad-line: rgba(255, 122, 112, .45);
  --glow: 0 0 22px rgba(43, 111, 224, .16), inset 0 0 26px rgba(43, 111, 224, .08);
  --r: 16px; --r-sm: 10px;
  --f-tit: 'Anton', 'Arial Narrow Bold', sans-serif;
  --f-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --gut: clamp(16px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #1b3b78 var(--bg1); }
body {
  margin: 0; min-height: 100dvh; color: var(--ink-1); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased;
  /* iPhone en horizontal: que nada quede bajo la muesca (viewport-fit=cover) */
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(61, 135, 249, .16), transparent 60%),
    radial-gradient(700px 480px at -10% 110%, rgba(43, 111, 224, .12), transparent 60%),
    var(--bg1);
}
::selection { background: var(--blue); color: #fff; }
a { color: var(--blue-hi); text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; border-radius: 8px; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.envoltura { width: min(100% - 2 * var(--gut), 1120px); margin-inline: auto; }

/* Panel: no se enseña nada hasta tener los datos de la sesión */
body.cargando main, body.cargando .salir { visibility: hidden; }
.aviso-fallo { margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--bad-line); border-radius: var(--r-sm); background: var(--bad-bg); color: #ffd2cd; font-size: 16px; }

/* Marca (igual que la cabecera de la herramienta) */
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.marca-logo { font: 400 30px/1 var(--f-tit); letter-spacing: .01em; color: #fff; }
.marca-sep { width: 1px; height: 30px; background: var(--line-2); }
.marca-txt { display: grid; gap: 3px; line-height: 1.1; }
.marca-kick { font: 400 15px/1 var(--f-tit); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-hi); }
.marca-nom { font: 700 15px/1.2 var(--f-head); color: var(--ink-1); }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 12px 24px;
  border: 1px solid var(--blue-hi); border-radius: 999px; background: linear-gradient(180deg, #4f95ff, var(--blue-lo));
  color: #fff; font: 700 17px/1.1 var(--f-head); text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 28px rgba(43, 111, 224, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform 160ms var(--ease), box-shadow 200ms ease, filter 160ms ease; -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { filter: brightness(1.08); box-shadow: 0 14px 34px rgba(43, 111, 224, .45), inset 0 1px 0 rgba(255, 255, 255, .25); } }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.btn--sec { background: transparent; border-color: var(--line-2); box-shadow: none; color: var(--ink-1); }
@media (hover: hover) and (pointer: fine) { .btn--sec:hover { border-color: var(--blue-hi); box-shadow: none; filter: none; } }

/* ---------- ACCESO ---------- */
.acceso { display: grid; place-items: center; min-height: 100dvh; padding: 32px 0 48px; }
.acceso-caja { width: min(100% - 2 * var(--gut), 460px); }
.acceso .marca { margin-bottom: 30px; }
.acceso h1 { margin: 0; font: 400 clamp(38px, 9vw, 52px)/1.1 var(--f-tit); letter-spacing: .005em; text-transform: uppercase; color: #fff; }
.acceso h1 span { color: var(--blue-hi); }
.acceso-intro { margin: 12px 0 26px; color: var(--ink-2); }
.tarjeta {
  border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, var(--panel), rgba(0, 8, 26, .9));
  box-shadow: var(--glow);
}
.formulario { padding: 24px; display: grid; gap: 18px; }
.campo { display: grid; gap: 8px; }
.campo label { font: 600 16px/1.3 var(--f-head); color: var(--ink-1); }
.campo input {
  width: 100%; min-height: 56px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--bg0); color: #fff; font-size: 18px; letter-spacing: .01em;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.campo input::placeholder { color: var(--ink-3); }
.campo input:focus { outline: none; border-color: var(--blue-hi); box-shadow: 0 0 0 4px rgba(61, 135, 249, .2); }
.campo small { color: var(--ink-2); font-size: 15px; }
.campo[aria-invalid="true"] input { border-color: var(--bad-line); }
.error {
  display: none; margin: 0; padding: 12px 14px; border: 1px solid var(--bad-line); border-radius: var(--r-sm); background: var(--bad-bg);
  color: #ffd2cd; font-size: 16px;
}
.error.si { display: block; }
.aviso-info { margin: -8px 0 22px; padding: 12px 14px; border: 1px solid var(--line-3); border-radius: var(--r-sm); background: rgba(61, 135, 249, .10); color: var(--ink-1); font-size: 16px; }
.recordar { margin: -4px 0 0; color: var(--ink-2); font-size: 15px; }

/* FAQ: tarjeta debajo del formulario en el móvil; en ordenador, columna a la derecha a la altura del formulario (menos scroll) */
.acceso-lateral { margin-top: 18px; padding: 18px 20px 4px; }
.faq-tit { margin: 0 0 4px; font: 400 18px/1.1 var(--f-tit); letter-spacing: .05em; text-transform: uppercase; color: var(--blue-hi); }
.faq details { border-top: 1px solid var(--line); }
@media (min-width: 960px) {
  .acceso-caja {
    width: min(100% - 2 * var(--gut), 1040px); display: grid; column-gap: 48px; align-items: start;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr); grid-template-areas: "cab ." "form faq";
  }
  .acceso-cab { grid-area: cab; }
  .acceso-caja > .formulario { grid-area: form; }
  .acceso-lateral { grid-area: faq; margin-top: 0; padding: 20px 24px 6px; }
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px; cursor: pointer; list-style: none;
  font: 600 16px/1.35 var(--f-head); color: var(--ink-1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 18px; height: 18px; color: var(--blue-hi); flex: none; transition: transform 200ms var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .resp { padding: 0 4px 18px; color: var(--ink-2); font-size: 16px; }
.faq .resp p { margin: 0 0 12px; }
.faq .resp b { color: var(--ink-1); }

/* El correo de Hotmart, en pequeño: dónde está el código */
.correo-hm { margin: 6px 0 4px; border: 1px solid var(--line-2); border-radius: 12px; background: #f6f8fc; color: #1f2a3d; overflow: hidden; }
.correo-hm-cab { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #dfe5f0; font-size: 15px; color: #4a5872; }
.faq .correo-hm-cab b { color: #1f2a3d; }
.correo-hm-cuerpo { padding: 12px 14px 14px; font-size: 15px; line-height: 1.5; }
.correo-hm-fila { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed #dfe5f0; }
.correo-hm-fila:first-child { border-top: 0; }
.correo-hm-fila span { color: #4a5872; }
.correo-hm-fila.ojo { margin: 4px -8px 0; padding: 8px; border: 2px solid var(--blue); border-radius: 8px; background: #e8f0ff; }
.faq .correo-hm-fila.ojo b { font-family: ui-monospace, Menlo, Consolas, monospace; color: #0b3fa8; letter-spacing: .02em; }
.wa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.wa svg { width: 20px; height: 20px; color: #25d366; }

/* ---------- PANEL ---------- */
.cab { border-bottom: 1px solid var(--line); background: rgba(0, 4, 29, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 5; }
.cab-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.salir { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--ink-2); font: 600 15px/1 var(--f-head); cursor: pointer; transition: border-color 160ms ease, color 160ms ease; }
.salir svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .salir:hover { border-color: var(--blue-hi); color: #fff; } }
.salir .t-corto { display: none; }
/* En móvil, «Salir» con texto (no solo el icono): más claro para cualquiera y con nombre para los lectores de pantalla */
@media (max-width: 560px) { .marca-sep, .marca-txt .marca-nom { display: none; } .salir .t-largo { display: none; } .salir .t-corto { display: inline; } }

.portada { padding: clamp(28px, 6vw, 56px) 0 22px; }
.portada p.hola { margin: 0 0 6px; color: var(--blue-hi); font: 600 17px/1.3 var(--f-head); }
.portada h1 { margin: 0; font: 400 clamp(40px, 7vw, 68px)/1 var(--f-tit); text-transform: uppercase; color: #fff; text-wrap: balance; }
.portada h1 span { color: var(--blue-hi); }
.portada .sub { margin: 14px 0 0; max-width: 60ch; color: var(--ink-2); }

.rejilla { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; padding-bottom: 56px; }
@media (max-width: 900px) { .rejilla { grid-template-columns: 1fr; } }

.herramienta { display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.herramienta-vista { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg0); }
.herramienta-vista img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; opacity: .92; transition: transform 600ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .herramienta:hover .herramienta-vista img { transform: scale(1.02); } }
.herramienta-vista::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 4, 29, .85)); }
.herramienta-txt { padding: 22px 24px 24px; display: grid; gap: 12px; align-content: start; }
.etiqueta { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--blue-hi); font: 400 15px/1 var(--f-tit); letter-spacing: .06em; text-transform: uppercase; }
.herramienta h2 { margin: 0; font: 800 clamp(22px, 2.4vw, 27px)/1.2 var(--f-head); color: #fff; letter-spacing: -.01em; }
.herramienta p { margin: 0; color: var(--ink-2); }
.puntos { display: grid; gap: 8px; margin: 2px 0 6px; padding: 0; list-style: none; color: var(--ink-1); font-size: 16px; }
.puntos li { display: flex; gap: 10px; align-items: flex-start; }
.puntos svg { width: 18px; height: 18px; margin-top: 4px; color: var(--ok); flex: none; }
.herramienta .btn { justify-self: start; }
/* Mientras la herramienta no está publicada */
.pronto { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 0; padding: 14px 16px; border: 1px dashed var(--line-3); border-radius: var(--r-sm); color: var(--ink-1); font-size: 16px; }
.pronto svg { width: 22px; height: 22px; margin-top: 1px; flex: none; color: var(--blue-hi); }

.lateral { display: grid; gap: 18px; align-content: start; }
.bloque { padding: 20px 22px; }
.bloque h3 { margin: 0 0 12px; font: 400 18px/1.1 var(--f-tit); letter-spacing: .05em; text-transform: uppercase; color: var(--blue-hi); }
.datos { display: grid; gap: 10px; margin: 0; }
.datos div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.datos div:last-child { border-bottom: 0; padding-bottom: 0; }
.datos dt { color: var(--ink-2); font-size: 15px; }
.datos dd { margin: 0; color: #fff; font-weight: 600; font-size: 16px; text-align: right; overflow-wrap: anywhere; }
.datos .vivo { color: var(--ok); }
/* El correo puede ser largo: etiqueta encima y correo debajo, sin partirlo en tres líneas alineadas a la derecha */
.datos div.apilado { display: grid; gap: 2px; }
.datos div.apilado dd { text-align: left; }
.bloque p { margin: 0 0 14px; color: var(--ink-2); font-size: 16px; }
.bloque p:last-child { margin-bottom: 0; }
.bloque .btn { width: 100%; min-height: 50px; }

/* Móvil: tarjetas con menos relleno y botones a todo el ancho, para que nunca se partan en dos líneas */
@media (max-width: 420px) {
  .formulario, .herramienta-txt, .bloque, .acceso-lateral { padding-inline: 18px; }
  .herramienta .btn { justify-self: stretch; }
  .btn { padding-inline: 18px; }
}

.pie { padding: 18px 0 40px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 15px; }
.pie p { margin: 0 0 6px; max-width: 80ch; }
@media (prefers-reduced-motion: reduce) { .btn, .herramienta-vista img, .faq summary svg { transition: none; } }