/* Diagnóstico GAA — estilos
   Misma estética de la landing /mentoria/ y de /enlaces/ (tokens copiados de su código):
   fondo Ink Black con manchas difuminadas en Gina Purple, títulos en DM Serif Display con acento itálico lila,
   etiquetas en mayúsculas con letras separadas, tarjetas con borde neón morado y botones neón Digital Orange.
   Diseño deliberadamente oscuro (un solo tema, igual que la landing). */
:root {
  --ink: #0A0A0A;
  --ink-2: #120B13;
  --white: #FFFFFF;
  --purple: #881D8E;
  --purple-neon: #B04DB6;
  --lilac: #C8A7DF;
  --orange: #EF520C;
  --orange-deep: #D44708;
  --orange-neon: #FF7A3D;
  --on-ink: #FFFFFF;
  --on-ink-muted: #A7A0A5;
  --on-ink-soft: #D9D4D7;
  --on-ink-line: #2B272A;
  --card: rgba(255, 255, 255, .035);
  --card-line: rgba(176, 77, 182, .38);
  --glow-purple: rgba(136, 29, 142, .55);
  --glow-orange: rgba(239, 82, 12, .6);
  --danger: #FF8A7A;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; color: var(--on-ink); background-color: var(--ink);
  background-image:
    radial-gradient(620px 520px at 85% 0%, rgba(136, 29, 142, .36), transparent 70%),
    radial-gradient(520px 460px at 0% 55%, rgba(136, 29, 142, .2), transparent 70%),
    radial-gradient(420px 300px at 90% 100%, rgba(239, 82, 12, .12), transparent 70%);
  background-attachment: fixed;
  font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 400; text-wrap: balance; }

/* ---------- Barra superior (igual a «Llamadas limitadas cada mes») ---------- */
.announce {
  background: var(--ink); color: var(--on-ink-soft); border-bottom: 1px solid var(--on-ink-line);
  font: 600 11px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; text-align: center;
  padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- Encabezado (masthead de la landing) ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--ink); }
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: rgba(10, 10, 10, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.top-inner { max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding-block: 14px 12px; }
.marca { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.marca-nombre { font: 400 23px/1 var(--serif); letter-spacing: -.005em; }
.marca-rol { font: 600 9.5px/1.3 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--on-ink-muted); }
.atras {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; color: var(--on-ink-soft); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  padding: 9px 15px; font: 600 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
}
.atras:hover { border-color: var(--lilac); color: var(--white); }
.progreso { max-width: 640px; margin: 0 auto; height: 2px; background: var(--on-ink-line); border-radius: 2px; }
.progreso span {
  display: block; height: 100%; width: 0; border-radius: 2px; background: var(--purple-neon);
  box-shadow: 0 0 8px var(--glow-purple), 0 0 18px var(--glow-purple); transition: width .4s ease;
}

/* ---------- Contenido ---------- */
main {
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 30px 150px;
}
.pantalla { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }

/* Etiqueta tipo «pill» con punto brillante (Trayectoria / Para ti) */
.eyebrow {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font: 600 11px/1 var(--display); letter-spacing: .2em; text-transform: uppercase;
  color: var(--lilac); border: 1px solid rgba(200, 167, 223, .45); border-radius: 999px; padding: 10px 16px;
  box-shadow: 0 0 18px -2px var(--glow-purple);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

.pregunta { display: flex; flex-direction: column; gap: 16px; }
.pregunta + .pregunta { border-top: 1px solid var(--on-ink-line); padding-top: 28px; }
h1 { font: 400 clamp(32px, 7.4vw, 46px)/1.08 var(--serif); letter-spacing: -.012em; }
h2 { font: 400 clamp(25px, 5.6vw, 32px)/1.12 var(--serif); letter-spacing: -.008em; }
h1 em, h2 em { font-style: italic; color: var(--lilac); }
.ayuda { color: var(--on-ink-muted); font-size: 15px; margin-top: -6px; }
.lead { font-size: clamp(16.5px, 4.2vw, 18px); line-height: 1.6; color: var(--on-ink-soft); max-width: 54ch; }

/* ---------- Opciones: tarjetas como las de /enlaces/ ---------- */
.opciones { display: flex; flex-direction: column; gap: 12px; }
.op {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 18px;
  padding: 17px 16px 17px 20px; min-height: 64px; font: 500 16.5px/1.38 var(--body); color: var(--on-ink);
  box-shadow: 0 0 0 1px rgba(136, 29, 142, .08), 0 0 16px rgba(136, 29, 142, .12);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .08s ease;
}
.op:hover { border-color: var(--purple-neon); box-shadow: 0 0 0 1px rgba(136, 29, 142, .2), 0 0 22px var(--glow-purple); }
.op:active { transform: scale(.993); }
.op-texto { flex: 1; min-width: 0; }
.op-marca {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .55);
  display: grid; place-items: center; transition: background .25s ease, border-color .25s ease;
}
.op[role="checkbox"] .op-marca { border-radius: 10px; }
.op[aria-checked="true"] {
  border-color: var(--orange-neon); background: rgba(239, 82, 12, .07);
  box-shadow: 0 0 0 1px var(--orange-neon), 0 0 14px var(--glow-orange), 0 0 34px rgba(239, 82, 12, .28);
}
.op[aria-checked="true"] .op-marca { background: var(--orange); border-color: var(--orange); }
.op[aria-checked="true"] .op-marca::after {
  content: ""; width: 11px; height: 6px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) translate(1px, -1px);
}
.op[aria-disabled="true"] { opacity: .38; cursor: not-allowed; box-shadow: none; }

/* ---------- Campos ---------- */
.campos { display: flex; flex-direction: column; gap: 20px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label { font: 600 12px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-soft); }
.campo .opcional { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--on-ink-muted); }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"], .campo select, .campo textarea {
  width: 100%; background: rgba(255, 255, 255, .04); color: var(--on-ink);
  border: 1px solid var(--card-line); border-radius: 14px; padding: 14px 16px; font-size: 16px; min-height: 52px;
}
.campo select option { background: var(--ink-2); color: var(--on-ink); }
.campo textarea { min-height: 116px; resize: vertical; line-height: 1.5; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--on-ink-muted); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--lilac); box-shadow: 0 0 0 1px rgba(200, 167, 223, .4), 0 0 18px var(--glow-purple);
}
.campo .ayuda { margin: 0; font-size: 14px; }
.casilla { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; font: 400 15px/1.5 var(--body); color: var(--on-ink-soft); text-transform: none; letter-spacing: 0; }
.casilla input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--orange); flex: none; }
.casilla small { display: block; color: var(--on-ink-muted); margin-top: 3px; font-size: 13.5px; }
.legal { border-top: 1px solid var(--on-ink-line); padding-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.error { color: var(--danger); font-size: 14px; font-weight: 500; }
.invalido input, .invalido select, .invalido textarea { border-color: var(--danger) !important; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Botón neón Digital Orange (idéntico al de la landing) ---------- */
.acciones {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  background: linear-gradient(to top, rgba(10, 10, 10, .96) 60%, rgba(10, 10, 10, 0));
  padding-top: 22px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.acciones-inner { max-width: 640px; margin: 0 auto; display: flex; }
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 60px; cursor: pointer;
  border: 0; background: var(--orange); color: var(--white); text-decoration: none;
  font: 800 14.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 7px 7px 28px; border-radius: 999px;
  box-shadow: 0 0 0 1px var(--orange-neon), 0 0 12px var(--glow-orange), 0 0 30px rgba(239, 82, 12, .42), 0 0 64px rgba(239, 82, 12, .24);
  transition: box-shadow .35s ease, background .35s ease;
}
.btn-ico { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--white); color: var(--ink); display: grid; place-items: center; transition: transform .35s ease; }
.btn-ico svg { width: 18px; height: 18px; }
.btn:hover:not([disabled]) { background: var(--orange-deep); box-shadow: 0 0 0 1px #FF9A66, 0 0 18px rgba(239, 82, 12, .9), 0 0 48px rgba(239, 82, 12, .65), 0 0 110px rgba(239, 82, 12, .4); }
.btn:hover:not([disabled]) .btn-ico { transform: translateX(3px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; animation: none; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn:not([disabled]) { animation: breathe 3.6s ease-in-out infinite; }
  .btn:hover { animation: none; }
  @keyframes breathe { 50% { box-shadow: 0 0 0 1px var(--orange-neon), 0 0 16px rgba(239, 82, 12, .72), 0 0 40px rgba(239, 82, 12, .5), 0 0 84px rgba(239, 82, 12, .3); } }
}

/* ---------- Inicio (como /enlaces/) ---------- */
.intro { align-items: center; text-align: center; gap: 22px; padding-top: 6px; }
.avatar {
  width: 112px; height: 112px; border-radius: 50%; padding: 4px; background: var(--ink);
  border: 2px solid var(--purple-neon); box-shadow: 0 0 22px var(--glow-purple), 0 0 60px rgba(136, 29, 142, .3);
}
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.intro-nombre { font: 400 clamp(38px, 10vw, 52px)/1 var(--serif); letter-spacing: -.01em; }
.intro-rol { font: 600 11.5px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--on-ink-muted); margin-top: -8px; }
.intro-datos { color: var(--on-ink-soft); font-size: 15px; margin-top: -10px; }
.intro .titular { font: italic 400 clamp(27px, 6.6vw, 36px)/1.18 var(--serif); color: var(--lilac); margin-top: 8px; }
.intro .lead { margin: 0 auto; }
.pasos-intro { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; text-align: left; width: 100%; }
.pasos-intro li {
  display: flex; gap: 16px; align-items: baseline; padding: 16px 18px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--card-line); color: var(--on-ink-soft); font-size: 15.5px;
}
.pasos-intro b { font: 800 15px/1 var(--display); color: var(--lilac); letter-spacing: .04em; min-width: 1.6em; }

/* ---------- Resultado ---------- */
.resultado { gap: 24px; }
.programa {
  border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 8px; background: var(--card);
  border: 1px solid rgba(176, 77, 182, .55);
  box-shadow: 0 0 0 1px rgba(136, 29, 142, .2), 0 0 22px var(--glow-purple), 0 0 60px rgba(136, 29, 142, .25);
}
.programa .kicker { font: 800 11.5px/1.4 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--lilac); }
.programa .nombre { font: 400 clamp(25px, 6vw, 30px)/1.12 var(--serif); }
.programa p { color: var(--on-ink-soft); }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 6px 0 0; font-size: 15px; }
.datos dt { font: 600 11px/1.9 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-muted); }
.datos dd { margin: 0; color: var(--on-ink); font-weight: 500; }
.pendiente {
  display: inline-block; font: 700 10.5px/1.4 var(--display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange-neon); border: 1px dashed var(--orange-neon); border-radius: 6px; padding: 2px 7px;
}
.nota {
  position: relative; padding-left: 22px; color: var(--on-ink-soft); font-size: 15px;
}
.nota::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 2px; border-radius: 2px; background: var(--purple-neon); box-shadow: 0 0 8px var(--glow-purple), 0 0 18px var(--glow-purple); }
.tambien { display: flex; flex-direction: column; gap: 12px; }
.tambien h2 { font: 600 11px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--on-ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 16px; border-radius: 999px;
  font: 600 13px/1.3 var(--display); letter-spacing: .02em; color: var(--on-ink);
  border: 1px solid rgba(200, 167, 223, .6); background: rgba(136, 29, 142, .14);
  box-shadow: 0 0 12px rgba(136, 29, 142, .5), inset 0 0 12px rgba(136, 29, 142, .25);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 8px var(--lilac); flex: none; }
.acciones-resultado { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.numero-wa { font-size: 14px; color: var(--on-ink-muted); }
.numero-wa b { user-select: all; color: var(--on-ink); }

/* ---------- Panel interno (solo modo de prueba) ---------- */
.interno { border: 1px dashed rgba(255, 255, 255, .25); border-radius: 14px; padding: 14px 16px; font-size: 14px; color: var(--on-ink-soft); }
.interno summary { cursor: pointer; font: 600 11px/1.6 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.interno table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.interno td { padding: 6px 0; border-bottom: 1px solid var(--on-ink-line); vertical-align: top; }
.interno td:first-child { color: var(--on-ink-muted); width: 38%; padding-right: 10px; }
.interno pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; background: rgba(255, 255, 255, .04); padding: 10px; border-radius: 8px; max-height: 260px; overflow: auto; }

@media (min-width: 720px) {
  main { padding-block: 48px 160px; }
  .pantalla { gap: 30px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.entrar { animation: entrar .32s ease both; }
@keyframes entrar { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.campo .casilla { font: 400 15px/1.5 var(--body); letter-spacing: 0; text-transform: none; color: var(--on-ink-soft); }
.intro .eyebrow { align-self: center; }
.intro .eyebrow { margin-top: 6px; }
.aviso-envio { border: 1px solid rgba(255, 138, 122, .5); background: rgba(255, 138, 122, .08); border-radius: 14px; padding: 14px 16px; }

/* ---------- Explora la Moda (Ruta, workshops, Fashion Kids): misma estructura, acento rosa de su página ---------- */
html.explora {
  /* Paleta oficial de Explora la Moda: morado #7B3F8C, lila #D9C2E0, dorado miel #E8C766, fucsia #E01C84 (botones) */
  --purple: #7B3F8C; --purple-neon: #A65BB8; --lilac: #D9C2E0; --gold: #E8C766;
  --orange: #E01C84; --orange-deep: #B8146B; --orange-neon: #FF4FA8;
  --card-line: rgba(166, 91, 184, .45);
  --glow-purple: rgba(123, 63, 140, .55); --glow-orange: rgba(224, 28, 132, .6);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --display: "Jost", "Helvetica Neue", Arial, sans-serif;
  --body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html.explora body {
  background-image:
    radial-gradient(620px 520px at 85% 0%, rgba(176, 45, 130, .34), transparent 70%),
    radial-gradient(520px 460px at 0% 55%, rgba(136, 29, 142, .2), transparent 70%),
    radial-gradient(420px 300px at 90% 100%, rgba(232, 199, 102, .1), transparent 70%);
}
html.explora .btn { box-shadow: 0 0 0 1px var(--orange-neon), 0 0 12px var(--glow-orange), 0 0 30px rgba(224, 28, 132, .42), 0 0 64px rgba(224, 28, 132, .24); }
html.explora .op[aria-checked="true"] { box-shadow: 0 0 0 1px var(--orange-neon), 0 0 14px var(--glow-orange), 0 0 34px rgba(224, 28, 132, .28); background: rgba(224, 28, 132, .08); }
.marca-nombre em, .intro-nombre em { font-style: italic; color: var(--lilac); }
html.explora .intro .intro-rol { margin-top: 0; letter-spacing: .3em; }
@media (prefers-reduced-motion: no-preference) {
  html.explora .btn:not([disabled]) { animation-name: breathe-rosa; }
  @keyframes breathe-rosa { 50% { box-shadow: 0 0 0 1px var(--orange-neon), 0 0 16px rgba(224, 28, 132, .72), 0 0 40px rgba(224, 28, 132, .5), 0 0 84px rgba(224, 28, 132, .3); } }
}
html.explora .marca-nombre em, html.explora .intro-nombre em, html.explora h1 em { color: #E58FC4; }
html.explora .eyebrow { color: var(--gold); border-color: rgba(232, 199, 102, .45); box-shadow: 0 0 18px -2px rgba(232, 199, 102, .25); }

/* ---------- Inicio en celular: todo cabe en una sola pantalla, sin desplazarse ---------- */
@media (max-width: 699px) {
  main:has(.intro) { padding-top: 14px; padding-bottom: 104px; }
  .intro { gap: 12px; padding-top: 0; }
  .intro .avatar { width: 76px; height: 76px; padding: 3px; }
  .intro .intro-nombre { font-size: 32px; }
  .intro .intro-rol { font-size: 10px; letter-spacing: .16em; margin-top: -4px; }
  .intro .intro-datos { font-size: 13px; margin-top: -6px; }
  .intro .eyebrow { margin-top: 2px; }
  .intro h1 { font-size: 30px; line-height: 1.08; }
  .intro .lead { font-size: 15px; line-height: 1.45; }
  .pasos-intro { gap: 0; margin-top: 0; border: 1px solid var(--card-line); border-radius: 16px; background: var(--card); }
  .pasos-intro li { background: none; border: 0; border-radius: 0; padding: 10px 14px; font-size: 14px; line-height: 1.4; gap: 12px; }
  .pasos-intro li + li { border-top: 1px solid var(--card-line); }
  .pasos-intro b { font-size: 13px; }
}
@media (max-width: 699px) and (max-height: 700px) {
  .intro { gap: 10px; }
  .intro .avatar { width: 64px; height: 64px; }
  .intro .intro-nombre { font-size: 28px; }
  .intro h1 { font-size: 27px; }
  .intro .lead { font-size: 14px; }
  .pasos-intro li { padding: 8px 14px; font-size: 13.5px; }
}