/* =====================================================================
   GENERACIÓN VIGENTE · estilos propios (se agregan al CSS original app.css)
   Usa las mismas variables de marca: --brand-primary, --brand-primary-dark,
   --brand-accent, --brand-ink, --color-* (administrables desde el panel).
   ===================================================================== */
:root {
  --gv-radius: 1.5rem;
  --gv-shadow: 0 10px 30px rgb(16 35 56 / .10);
  --color-cream: #fffaf2;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); }
:focus-visible { outline: 4px solid color-mix(in srgb, var(--brand-primary) 45%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] > summary .rotate-when-open { transform: rotate(180deg); }

/* ---------- Utilidades que no estaban en el CSS compilado original ---------- */
.bg-cream { background-color: var(--color-cream); }
.hover\:bg-cream:hover { background-color: var(--color-cream); }
.hover\:bg-white\/15:hover { background-color: rgb(255 255 255 / .15); }
.max-h-\[22rem\] { max-height: 22rem; }
.mt-auto { margin-top: auto; }
.opacity-40 { opacity: .4; }
.pb-3 { padding-bottom: .75rem; }
.pr-1 { padding-right: .25rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 40rem) {
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
  .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sm\:grid-cols-\[1fr_12rem\] { grid-template-columns: 1fr 12rem; }
  .sm\:grid-cols-\[1fr_7rem\] { grid-template-columns: 1fr 7rem; }
  .sm\:grid-cols-\[6rem_1fr\] { grid-template-columns: 6rem 1fr; }
  .sm\:items-end { align-items: flex-end; }
  .sm\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .sm\:w-56 { width: 14rem; }
}
@media (min-width: 64rem) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:px-16 { padding-left: 4rem; padding-right: 4rem; }
  .lg\:top-24 { top: 6rem; }
  .lg\:sticky { position: sticky; }
}
@media print { .print\:hidden { display: none !important; } }

/* ---------- Tamaño de letra accesible (A · A+ · A++) ---------- */
.gv-ts[aria-pressed="true"] { background: var(--brand-primary); color: #fff; }

/* ---------- Mensajes flash ---------- */
.gv-flash { border: 2px solid transparent; animation: gv-in .35s ease both; }
.gv-flash-ok { background: var(--color-mint); color: var(--brand-primary-dark); border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent); }
.gv-flash-error { background: var(--color-coral-soft); color: var(--color-coral-dark); border-color: color-mix(in srgb, var(--color-coral-dark) 30%, transparent); }
.gv-flash-info { background: var(--color-sky); color: var(--brand-primary-dark); border-color: color-mix(in srgb, var(--brand-primary-dark) 15%, transparent); }

/* ---------- Chips de estado ---------- */
.gv-chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .3rem .8rem; font-size: .95rem; font-weight: 800; line-height: 1.2; vertical-align: middle; }
.gv-chip-ok { background: var(--color-mint); color: var(--brand-primary); }
.gv-chip-new { background: var(--color-coral-soft); color: var(--color-coral-dark); }
.gv-chip-gold { background: var(--color-gold-soft); color: var(--brand-primary-dark); }
.gv-chip-lock { background: #eef1f4; color: var(--color-muted); }
.gv-chip-coral { background: var(--brand-accent); color: #fff; }

/* ---------- Temario del curso ---------- */
.gv-temario-item { display: flex; align-items: center; gap: 1rem; border-radius: 1.5rem; border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 10%, transparent); background: #fff; padding: 1rem 1.1rem; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.gv-temario-item:hover { border-color: color-mix(in srgb, var(--brand-primary) 50%, transparent); box-shadow: var(--gv-shadow); transform: translateY(-1px); }
.gv-temario-item.is-actual { border-color: var(--brand-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 12%, transparent); }
.gv-temario-item.is-ok { background: color-mix(in srgb, var(--color-mint) 55%, #fff); }
.gv-temario-item.is-lock { background: #f6f8f9; opacity: .8; }
.gv-temario-ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; flex-shrink: 0; border-radius: 1rem; background: var(--color-sky); font-size: 1.9rem; }
.gv-temario-item.is-lock .gv-temario-ico { filter: grayscale(1); }
.gv-temario-go { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex-shrink: 0; border-radius: 999px; background: var(--brand-primary); color: #fff; }
.gv-temario-item.is-ok .gv-temario-go { background: var(--color-mint-strong); color: var(--brand-primary); }

/* ---------- Barra lateral de clases ---------- */
.gv-side-item { display: flex; gap: .75rem; align-items: flex-start; border-radius: 1.1rem; padding: .7rem .8rem; border: 2px solid transparent; transition: background .2s; }
a.gv-side-item:hover { background: var(--color-sky); }
.gv-side-item.is-on { background: var(--color-mint); border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent); }
.gv-side-item.is-lock { opacity: .6; }

/* ---------- Material descargable ---------- */
.gv-material { display: flex; align-items: center; gap: 1rem; border-radius: 1.25rem; background: var(--color-sky); padding: .9rem 1rem; color: var(--brand-primary-dark); min-height: 4rem; transition: background .2s; }
a.gv-material:hover { background: var(--color-mint); }
.gv-material strong { display: block; font-size: 1.1rem; }
.gv-material small { display: block; color: var(--color-muted); font-size: .95rem; }
.gv-material-ico { display: grid; place-items: center; min-width: 3.2rem; height: 3.2rem; border-radius: .9rem; background: var(--brand-accent); color: #fff; font-weight: 900; font-size: .8rem; letter-spacing: .03em; padding: 0 .3rem; }

/* ---------- Contenido de la clase (texto enriquecido) ---------- */
.gv-prose { color: var(--brand-ink); font-size: 1.2rem; line-height: 1.75; }
.gv-prose > * + * { margin-top: 1rem; }
.gv-prose h2 { font-family: var(--font-heading, inherit); font-weight: 900; font-size: 1.75rem; line-height: 1.2; color: var(--brand-primary-dark); margin-top: 2rem; }
.gv-prose h3 { font-family: var(--font-heading, inherit); font-weight: 800; font-size: 1.4rem; color: var(--brand-primary-dark); margin-top: 1.5rem; }
.gv-prose p { margin: 0; }
.gv-prose p + p { margin-top: 1rem; }
.gv-prose strong, .gv-prose b { color: var(--brand-primary-dark); font-weight: 800; }
.gv-prose a { color: var(--brand-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.gv-prose ul, .gv-prose ol { padding-left: 0; list-style: none; display: grid; gap: .7rem; }
.gv-prose ol { counter-reset: gv; }
.gv-prose ol > li { counter-increment: gv; position: relative; padding: .9rem 1rem .9rem 4rem; border-radius: 1.2rem; background: var(--color-sky); }
.gv-prose ol > li::before { content: counter(gv); position: absolute; left: .9rem; top: .75rem; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: .75rem; background: var(--brand-primary-dark); color: #fff; font-weight: 900; }
.gv-prose ul > li { position: relative; padding-left: 2rem; }
.gv-prose ul > li::before { content: ""; position: absolute; left: .35rem; top: .65em; width: .7rem; height: .7rem; border-radius: 999px; background: var(--brand-accent); }
.gv-prose img { border-radius: 1.5rem; margin: 1.5rem 0; width: 100%; height: auto; box-shadow: var(--gv-shadow); }
.gv-prose blockquote { border-left: 6px solid var(--color-gold); background: var(--color-gold-soft); padding: 1rem 1.25rem; border-radius: 0 1.2rem 1.2rem 0; font-weight: 600; }
.gv-prose .gv-nota, .gv-nota { border-radius: 1.2rem; background: var(--color-mint); padding: 1rem 1.25rem; border-left: 6px solid var(--brand-primary); }
.gv-prose .ql-align-center { text-align: center; }

/* ---------- Formularios accesibles ---------- */
.gv-file { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; border: 2px dashed color-mix(in srgb, var(--brand-primary-dark) 30%, transparent); border-radius: 1.25rem; background: #fff; padding: 1rem 1.2rem; cursor: pointer; transition: border-color .2s, background .2s; }
.gv-file:hover, .gv-file.is-filled { border-color: var(--brand-primary); background: color-mix(in srgb, var(--color-mint) 50%, #fff); }
.gv-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.gv-file span { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.1rem; color: var(--brand-primary-dark); }
.gv-file small { color: var(--color-muted); font-size: .95rem; }
.gv-radio-card, .gv-check-card { position: relative; display: flex; }
.gv-radio-card input, .gv-check-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.gv-radio-card span, .gv-check-card span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 3.5rem; border-radius: 1.1rem; border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 22%, transparent); background: #fff; font-weight: 800; font-size: 1.1rem; color: var(--brand-primary-dark); padding: .5rem .75rem; text-align: center; transition: all .2s; }
.gv-radio-card input:checked + span, .gv-check-card input:checked + span { border-color: var(--brand-primary); background: var(--color-mint); color: var(--brand-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 12%, transparent); }
.gv-radio-card input:focus-visible + span, .gv-check-card input:focus-visible + span { outline: 4px solid color-mix(in srgb, var(--brand-primary) 45%, transparent); }
.gv-correcta { position: relative; flex-shrink: 0; }
.gv-correcta input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.gv-correcta span { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 22%, transparent); font-weight: 900; font-size: 1.2rem; color: var(--brand-primary-dark); background: #fff; }
.gv-correcta input:checked + span { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
select.min-h-14 { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317324D' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.4rem; padding-right: 3rem; }
textarea.min-h-14 { min-height: 6rem; line-height: 1.5; }

/* ---------- Pestañas y tablas (área del profesor) ---------- */
.gv-tabs { display: flex; flex-wrap: wrap; gap: .5rem; background: #fff; padding: .4rem; border-radius: 1.25rem; box-shadow: 0 1px 3px rgb(0 0 0 / .06); }
.gv-tabs a { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1.1rem; border-radius: 1rem; font-weight: 800; font-size: 1.05rem; color: var(--brand-primary-dark); }
.gv-tabs a:hover { background: var(--color-sky); }
.gv-tabs a.is-on { background: var(--brand-primary); color: #fff; }
.gv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gv-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1.02rem; }
.gv-table th { text-align: left; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); padding: .7rem .75rem; border-bottom: 2px solid var(--color-sky); white-space: nowrap; }
.gv-table td { padding: .8rem .75rem; border-bottom: 1px solid var(--color-sky); vertical-align: middle; }
.gv-table tbody tr:hover td { background: color-mix(in srgb, var(--color-sky) 55%, #fff); }
.gv-icon-btn { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; color: var(--brand-primary-dark); background: var(--color-sky); transition: background .2s; vertical-align: middle; }
.gv-icon-btn:hover { background: var(--color-mint); color: var(--brand-primary); }
.gv-icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.gv-icon-danger { color: var(--color-coral-dark); }
.gv-icon-danger:hover { background: var(--color-coral-soft); color: var(--color-coral-dark); }
.gv-quill { background: #fff; border-radius: 0 0 1.25rem 1.25rem; }
.gv-quill .ql-editor { min-height: 18rem; font-size: 1.15rem; line-height: 1.7; }
.ql-toolbar.ql-snow { border-radius: 1.25rem 1.25rem 0 0; border-color: color-mix(in srgb, var(--brand-primary-dark) 25%, transparent) !important; background: var(--color-sky); }
.ql-container.ql-snow { border-color: color-mix(in srgb, var(--brand-primary-dark) 25%, transparent) !important; border-radius: 0 0 1.25rem 1.25rem; }

/* ---------- Aviso destacado ---------- */
.gv-aviso-destacado { background: linear-gradient(135deg, var(--color-gold-soft), #fff 70%); border: 2px solid var(--color-gold); box-shadow: var(--gv-shadow); }

/* ---------- Botón flotante de WhatsApp ---------- */
.gv-wa-float { position: fixed; z-index: 45; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: .6rem; background: #25d366; color: #fff; border-radius: 999px; padding: .8rem; box-shadow: 0 10px 25px rgb(0 0 0 / .25); font-weight: 800; transition: transform .2s; }
.gv-wa-float:hover { transform: scale(1.05); }
.gv-wa-txt { display: none; padding-right: .4rem; font-size: 1.05rem; }
@media (min-width: 64rem) { .gv-wa-txt { display: inline; } .gv-wa-float { padding: .8rem 1.1rem .8rem .8rem; } }
.gv-app .gv-wa-float { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 48rem) { .gv-app .gv-wa-float { bottom: 1.25rem; } }

/* ---------- Asistente IA (Gemini · ChatGPT · Claude) ---------- */
.gv-chat-fab { position: fixed; z-index: 46; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: .6rem; border-radius: 999px; padding: .8rem; background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); color: #fff; font-weight: 800; box-shadow: 0 10px 25px rgb(0 0 0 / .25); animation: gv-pulse-ring 2.6s ease-out infinite; }
.gv-chat-fab-txt { display: none; font-size: 1.05rem; padding-right: .4rem; }
@media (min-width: 64rem) { .gv-chat-fab-txt { display: inline; } .gv-chat-fab { padding: .8rem 1.1rem .8rem .8rem; } }
.gv-app .gv-chat-fab { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 48rem) { .gv-app .gv-chat-fab { bottom: 1.25rem; } }
.gv-chat { position: fixed; z-index: 60; inset: auto .75rem calc(.75rem + env(safe-area-inset-bottom)) .75rem; max-height: min(44rem, calc(100vh - 1.5rem)); display: flex; flex-direction: column; background: #fff; border-radius: 1.75rem; box-shadow: 0 25px 60px rgb(16 35 56 / .35); overflow: hidden; animation: gv-up .25s ease both; }
@media (min-width: 40rem) { .gv-chat { left: 1.25rem; right: auto; bottom: 1.25rem; width: 26rem; } }
.gv-chat-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1rem; background: var(--color-navy-deep); color: #fff; }
.gv-chat-title { display: flex; align-items: center; gap: .75rem; }
.gv-chat-title strong { display: block; font-size: 1.15rem; }
.gv-chat-title small { display: block; font-size: .9rem; color: rgb(255 255 255 / .75); }
.gv-chat-avatar { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--color-glow); color: var(--color-navy-deep); }
.gv-chat-x { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 999px; background: rgb(255 255 255 / .12); color: #fff; }
.gv-chat-tabs { display: flex; gap: .4rem; padding: .6rem; background: var(--color-sky); }
.gv-chat-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.9rem; border-radius: .9rem; font-weight: 800; font-size: 1rem; color: var(--brand-primary-dark); background: #fff; border: 2px solid transparent; }
.gv-chat-tab[aria-selected="true"] { border-color: var(--gv-prov, var(--brand-primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gv-prov, var(--brand-primary)) 18%, transparent); }
.gv-dot { width: .7rem; height: .7rem; border-radius: 999px; background: var(--gv-prov, var(--brand-primary)); display: inline-block; flex-shrink: 0; }
.gv-prov-gemini { --gv-prov: #4f7df3; }
.gv-prov-chatgpt { --gv-prov: #10a37f; }
.gv-prov-claude { --gv-prov: #d97757; }
.gv-chat-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; background: #fff; min-height: 14rem; }
.gv-msg { max-width: 88%; border-radius: 1.2rem; padding: .75rem 1rem; font-size: 1.08rem; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.gv-msg p { margin: 0; }
.gv-msg-bot { align-self: flex-start; background: var(--color-sky); color: var(--brand-ink); border-bottom-left-radius: .35rem; }
.gv-msg-user { align-self: flex-end; background: var(--brand-primary); color: #fff; border-bottom-right-radius: .35rem; }
.gv-msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .85rem; color: var(--color-muted); }
.gv-msg-meta button, .gv-msg-meta a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; color: var(--brand-primary); background: #fff; border-radius: .7rem; padding: .35rem .6rem; }
.gv-msg-typing { display: inline-flex; gap: .3rem; }
.gv-msg-typing i { width: .55rem; height: .55rem; border-radius: 999px; background: var(--color-muted); animation: gv-blink 1.2s infinite; }
.gv-msg-typing i:nth-child(2) { animation-delay: .2s; } .gv-msg-typing i:nth-child(3) { animation-delay: .4s; }
.gv-chat-sugs { display: flex; flex-direction: column; gap: .5rem; }
.gv-chat-sugs button { text-align: left; border: 2px solid color-mix(in srgb, var(--brand-primary) 30%, transparent); border-radius: 1rem; padding: .6rem .9rem; font-weight: 700; color: var(--brand-primary-dark); background: #fff; font-size: 1rem; }
.gv-chat-sugs button:hover { background: var(--color-mint); }
.gv-chat-form { display: flex; align-items: flex-end; gap: .5rem; padding: .7rem; border-top: 2px solid var(--color-sky); background: #fff; }
.gv-chat-form textarea { flex: 1; resize: none; min-height: 3.2rem; max-height: 8rem; border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 22%, transparent); border-radius: 1rem; padding: .7rem .9rem; font-size: 1.08rem; font-family: inherit; }
.gv-chat-form textarea:focus { outline: none; border-color: var(--brand-primary); }
.gv-chat-mic, .gv-chat-send { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; flex-shrink: 0; border-radius: 1rem; }
.gv-chat-mic { background: var(--color-sky); color: var(--brand-primary-dark); }
.gv-chat-mic.is-rec { background: var(--brand-accent); color: #fff; animation: gv-pulse-ring 1.2s infinite; }
.gv-chat-send { background: var(--brand-primary); color: #fff; }
.gv-chat-send:disabled { opacity: .5; }

/* ---------- Botones de IA externas ---------- */
.gv-ia-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.5rem; border-radius: 1.1rem; border: 2px solid color-mix(in srgb, var(--gv-prov) 40%, transparent); background: color-mix(in srgb, var(--gv-prov) 8%, #fff); color: var(--brand-primary-dark); font-weight: 800; font-size: 1.08rem; padding: 0 1rem; transition: background .2s; }
.gv-ia-btn:hover { background: color-mix(in srgb, var(--gv-prov) 16%, #fff); }

/* ---------- Examen (QuizRunner) ---------- */
.gv-quiz-card { background: #fff; border-radius: 2rem; box-shadow: 0 1px 3px rgb(0 0 0 / .06); padding: 1.5rem; }
@media (min-width: 40rem) { .gv-quiz-card { padding: 2.25rem; } }
.gv-quiz-opt { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; min-height: 4rem; border-radius: 1.25rem; border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 18%, transparent); background: #fff; padding: .8rem 1rem; font-size: 1.15rem; font-weight: 700; color: var(--brand-ink); transition: all .15s; }
.gv-quiz-opt:hover { border-color: color-mix(in srgb, var(--brand-primary) 55%, transparent); background: color-mix(in srgb, var(--color-mint) 40%, #fff); }
.gv-quiz-opt .gv-letter { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; flex-shrink: 0; background: var(--color-sky); color: var(--brand-primary-dark); font-weight: 900; }
.gv-quiz-opt[aria-checked="true"] { border-color: var(--brand-primary); background: var(--color-mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 14%, transparent); }
.gv-quiz-opt[aria-checked="true"] .gv-letter { background: var(--brand-primary); color: #fff; }
.gv-quiz-dots { display: flex; flex-wrap: wrap; gap: .4rem; }
.gv-quiz-dots span { width: 2.2rem; height: .55rem; border-radius: 999px; background: var(--color-mint-strong); opacity: .5; }
.gv-quiz-dots span.is-done { background: var(--brand-primary); opacity: 1; }
.gv-quiz-dots span.is-on { background: var(--brand-accent); opacity: 1; }
.gv-review-item { border-radius: 1.5rem; padding: 1.1rem 1.2rem; border: 2px solid transparent; }
.gv-review-ok { background: color-mix(in srgb, var(--color-mint) 70%, #fff); border-color: color-mix(in srgb, var(--brand-primary) 25%, transparent); }
.gv-review-bad { background: var(--color-coral-soft); border-color: color-mix(in srgb, var(--color-coral-dark) 25%, transparent); }
.gv-score-ring { --p: 0; width: 11rem; height: 11rem; border-radius: 999px; display: grid; place-items: center; margin: 0 auto; background: conic-gradient(var(--gv-ring, var(--brand-primary)) calc(var(--p) * 1%), var(--color-sky) 0); }
.gv-score-ring > div { width: 8.6rem; height: 8.6rem; border-radius: 999px; background: #fff; display: grid; place-items: center; text-align: center; }
.gv-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.gv-confetti i { position: absolute; top: -2rem; width: .7rem; height: 1.1rem; border-radius: .2rem; animation: gv-fall linear forwards; }

/* ---------- Escuchar la clase ---------- */
.gv-listen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.gv-listen-bar { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.2rem; }
.gv-listen-bar i { width: 4px; background: currentColor; border-radius: 3px; animation: gv-eq 1s ease-in-out infinite; }
.gv-listen-bar i:nth-child(2) { animation-delay: .15s; } .gv-listen-bar i:nth-child(3) { animation-delay: .3s; } .gv-listen-bar i:nth-child(4) { animation-delay: .45s; }

/* ---------- Certificado (A4 horizontal imprimible) ---------- */
.gv-cert-actions { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; padding: 1.25rem; }
.gv-cert { width: min(297mm, 100%); aspect-ratio: 297 / 210; margin: 0 auto 2rem; background: #fff; padding: 1.6rem; box-shadow: var(--gv-shadow); }
.gv-cert-inner { height: 100%; border: 3px solid var(--color-gold); outline: 10px solid color-mix(in srgb, var(--brand-primary) 10%, transparent); outline-offset: -18px; border-radius: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 3rem; background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--color-mint) 80%, transparent), transparent 35%), radial-gradient(circle at 100% 100%, var(--color-gold-soft), transparent 40%); }
.gv-cert-logo { height: 4.5rem; width: auto; object-fit: contain; }
.gv-cert-kicker { margin-top: .75rem; font-weight: 900; letter-spacing: .25em; text-transform: uppercase; color: var(--brand-accent); font-size: .95rem; }
.gv-cert-otorga { margin-top: .75rem; color: var(--color-muted); font-size: 1.05rem; }
.gv-cert-nombre { font-family: var(--font-heading, Georgia, serif); font-weight: 900; font-size: clamp(1.8rem, 4.5vw, 3rem); color: var(--brand-primary-dark); margin-top: .25rem; border-bottom: 3px solid var(--color-gold); padding: 0 1.5rem .3rem; }
.gv-cert-texto { margin-top: .7rem; color: var(--brand-ink); font-size: 1.05rem; }
.gv-cert-curso { margin-top: .3rem; font-weight: 900; font-size: clamp(1.15rem, 2.6vw, 1.7rem); color: var(--brand-primary); }
.gv-cert-pie { margin-top: auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr auto; gap: 1.5rem; align-items: end; font-size: .9rem; color: var(--color-muted); }
.gv-cert-firma { font-weight: 800; color: var(--brand-primary-dark); border-top: 2px solid var(--brand-primary-dark); padding-top: .3rem; }
.gv-cert-qr img { width: 5.5rem; height: 5.5rem; margin: 0 auto; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body { background: #fff !important; }
  .gv-cert { width: 297mm; height: 210mm; margin: 0; box-shadow: none; aspect-ratio: auto; }
  .gv-wa-float, .gv-chat-fab, .gv-chat { display: none !important; }
}

/* ---------- Animaciones suaves (respetan "reducir movimiento") ---------- */
.gv-reveal { animation: gv-in .6s ease both; }
.gv-float { animation: gv-float 6s ease-in-out infinite; }
.gv-float-2 { animation-delay: -3s; }
.gv-pulse { animation: gv-pulse-dot 1.8s ease-in-out infinite; }
.gv-wave { display: inline-block; transform-origin: 70% 70%; animation: gv-wave 2.4s ease-in-out 1s 2; }
.gv-underline path { stroke-dasharray: 260; stroke-dashoffset: 260; animation: gv-draw 1.1s .5s ease forwards; }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-in { opacity: 1; transform: none; }
@keyframes gv-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes gv-up { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes gv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes gv-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes gv-pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-primary) 45%, transparent), 0 10px 25px rgb(0 0 0 / .25); } 70% { box-shadow: 0 0 0 16px transparent, 0 10px 25px rgb(0 0 0 / .25); } 100% { box-shadow: 0 0 0 0 transparent, 0 10px 25px rgb(0 0 0 / .25); } }
@keyframes gv-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
@keyframes gv-draw { to { stroke-dashoffset: 0; } }
@keyframes gv-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes gv-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@keyframes gv-fall { to { transform: translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Intro animada a pantalla completa ---------- */
html.gv-intro-lock, html.gv-intro-lock body { overflow: hidden; }
.gv-intro { position: fixed; inset: 0; z-index: 100; background: #f3f1ec; display: grid; place-items: center; transition: opacity .6s ease, transform .6s ease; }
.gv-intro.is-out { opacity: 0; transform: scale(1.04); pointer-events: none; }
.gv-intro-video { width: 100%; height: 100%; object-fit: contain; background: #f3f1ec; }
@media (orientation: landscape) { .gv-intro-video { object-fit: cover; } }
.gv-intro-final { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; text-align: center; background: #fff; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.gv-intro-final.is-on { opacity: 1; }
.gv-intro-final img { width: min(22rem, 70vw); height: auto; transform: scale(.9); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.gv-intro-final.is-on img { transform: none; }
.gv-intro-t { font-family: var(--font-heading, inherit); font-weight: 900; font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.1; color: var(--brand-primary-dark); max-width: 22ch; }
.gv-intro-s { font-size: 1.25rem; color: var(--color-muted); max-width: 34ch; }
.gv-intro-ui { position: absolute; left: 0; right: 0; bottom: calc(1.25rem + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: .75rem; padding: 0 1rem; flex-wrap: wrap; }
.gv-intro-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 3.5rem; padding: 0 1.4rem; border-radius: 999px; font-weight: 800; font-size: 1.1rem; background: rgb(255 255 255 / .92); color: var(--brand-primary-dark); box-shadow: 0 8px 24px rgb(0 0 0 / .15); border: 2px solid rgb(23 50 77 / .12); }
.gv-intro-skip { background: var(--brand-primary); color: #fff; border-color: transparent; }
.gv-intro-bar { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: rgb(0 0 0 / .06); }
.gv-intro-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--color-gold), var(--brand-accent)); transition: width .25s linear; }
.gv-intro-play { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 1rem; font-weight: 900; font-size: 1.4rem; color: var(--brand-primary-dark); }
.gv-intro-play svg { width: 7rem; height: 7rem; padding: 1.8rem 1.5rem 1.8rem 2rem; border-radius: 999px; background: var(--brand-accent); color: #fff; box-shadow: 0 0 0 14px color-mix(in srgb, var(--brand-accent) 25%, transparent); }

/* ---------- Video en la portada ---------- */
.gv-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #f3f1ec; }
.gv-hero-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .9rem; color: #fff; text-shadow: 0 2px 12px rgb(0 0 0 / .45); }
.gv-hero-play-ico { display: grid; place-items: center; width: 6.5rem; height: 6.5rem; border-radius: 999px; background: var(--brand-accent); box-shadow: 0 0 0 12px rgb(255 255 255 / .25), 0 18px 40px rgb(0 0 0 / .35); animation: gv-pulse-ring 2.4s ease-out infinite; transition: transform .2s; }
.gv-hero-play:hover .gv-hero-play-ico { transform: scale(1.06); }
.gv-hero-play-txt { font-weight: 900; font-size: 1.35rem; text-align: center; line-height: 1.2; }
.gv-hero-play-txt small { display: block; font-size: 1rem; font-weight: 700; opacity: .9; }

/* ---------- Bienvenida (prueba gratis) ---------- */
.gv-steps { display: flex; gap: .5rem; align-items: center; }
.gv-steps span { height: .6rem; flex: 1; border-radius: 999px; background: var(--color-mint-strong); opacity: .5; }
.gv-steps span.is-on { background: var(--brand-primary); opacity: 1; }
.gv-sexo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gv-sexo label { position: relative; }
.gv-sexo input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.gv-sexo span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 8rem; border-radius: 1.5rem; border: 3px solid color-mix(in srgb, var(--brand-primary-dark) 18%, transparent); background: #fff; font-weight: 900; font-size: 1.35rem; color: var(--brand-primary-dark); transition: all .2s; }
.gv-sexo span b { font-size: 2.8rem; line-height: 1; }
.gv-sexo input:checked + span { border-color: var(--brand-primary); background: var(--color-mint); color: var(--brand-primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-primary) 15%, transparent); }
.gv-sexo input:focus-visible + span { outline: 4px solid color-mix(in srgb, var(--brand-primary) 45%, transparent); }
.gv-edad { font-size: 2.2rem !important; font-weight: 900; text-align: center; min-height: 5rem !important; letter-spacing: .05em; }
.gv-continuar { min-height: 5.5rem !important; font-size: 1.6rem !important; border-radius: 1.75rem !important; }
.gv-intro-final.is-on ~ .gv-intro-ui, .gv-intro-final.is-on ~ .gv-intro-bar { opacity: 0; transition: opacity .4s; pointer-events: none; }

/* =====================================================================
   INGRESO (la web abre aquí) · formulario + escenario animado con el video
   ===================================================================== */
.gv-login { flex: 1; display: grid; min-height: 100vh; min-height: 100dvh; background: #fff; }
@media (min-width: 64rem) { .gv-login { grid-template-columns: minmax(28rem, 1fr) 1.15fr; } }
.gv-login-form { display: flex; flex-direction: column; padding: 1.5rem 1.25rem; position: relative; z-index: 1; }
@media (min-width: 40rem) { .gv-login-form { padding: 2rem 2.5rem; } }
@media (min-width: 80rem) { .gv-login-form { padding: 2.25rem 4.5rem; } }
.gv-login-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gv-login-logo { height: 3.5rem; width: auto; object-fit: contain; }
@media (max-width: 40rem) { .gv-login-logo { height: 2.75rem; } }
.gv-login-box { width: 100%; max-width: 30rem; margin: auto; padding: 2rem 0; animation: gv-in .7s ease both; }
.gv-login-hola { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; background: var(--color-mint); color: var(--brand-primary); font-weight: 800; font-size: 1.1rem; padding: .45rem 1rem; }
.gv-login-h1 { margin-top: 1rem; font-family: var(--font-heading, inherit); font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1.05; color: var(--brand-primary-dark); letter-spacing: -.02em; }
.gv-login-h1 span { background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent), var(--color-gold), var(--brand-primary)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gv-shine 6s linear infinite; }
.gv-login-sub { margin-top: .9rem; font-size: 1.2rem; color: var(--color-muted); line-height: 1.5; }
.gv-login-sub strong { color: var(--brand-primary-dark); }
.gv-login-btn { min-height: 4.5rem !important; font-size: 1.45rem !important; position: relative; overflow: hidden; }
.gv-login-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .35), transparent); transform: skewX(-20deg); animation: gv-sweep 3.8s ease-in-out 1.2s infinite; }
.gv-login-btn.is-loading { pointer-events: none; opacity: .85; }
.gv-login-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; }
.gv-login-links a { display: inline-flex; align-items: center; gap: .4rem; min-height: 3rem; font-weight: 800; font-size: 1.1rem; color: var(--brand-primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.gv-login-gift { margin-top: 1.75rem; display: flex; align-items: center; gap: 1rem; border-radius: 1.5rem; padding: 1.1rem 1.25rem; background: linear-gradient(135deg, var(--color-gold-soft), #fff 80%); border: 2px solid color-mix(in srgb, var(--color-gold) 60%, transparent); color: var(--brand-primary-dark); transition: transform .2s, box-shadow .2s; }
.gv-login-gift:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgb(215 150 37 / .25); }
.gv-login-gift strong { display: block; font-size: 1.15rem; }
.gv-login-gift small { display: block; font-size: 1rem; color: var(--color-muted); }
.gv-login-gift > span:nth-child(2) { flex: 1; }
.gv-login-gift-ico { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: #fff; font-size: 1.8rem; box-shadow: 0 4px 12px rgb(0 0 0 / .08); animation: gv-bounce 2.8s ease-in-out infinite; }
.gv-login-demo { margin-top: 1.5rem; border-radius: 1.25rem; border: 2px dashed color-mix(in srgb, var(--color-gold) 70%, transparent); padding: .8rem 1rem; background: #fffdf6; }
.gv-login-demo summary { font-weight: 800; color: var(--brand-primary-dark); min-height: 2.5rem; display: flex; align-items: center; }
.gv-login-demo > div { display: grid; gap: .5rem; margin-top: .6rem; }
.gv-login-demo button { text-align: left; border-radius: 1rem; background: #fff; padding: .65rem .9rem; box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.gv-login-demo button:hover { background: var(--color-sky); }
.gv-login-demo strong { display: block; color: var(--brand-primary-dark); }
.gv-login-demo span { display: block; color: var(--color-muted); font-size: .95rem; }
.gv-login-foot { text-align: center; font-size: .95rem; color: var(--color-muted); }
.gv-login-foot a { font-weight: 700; color: var(--brand-primary); }
.gv-login-mobile-video { margin: 1.25rem 0 0; border-radius: 1.5rem; overflow: hidden; aspect-ratio: 16 / 9; background: #f3f1ec; box-shadow: 0 14px 34px rgb(16 35 56 / .16); }
.gv-login-mv { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 64rem) { .gv-login-mobile-video { display: none; } }

.gv-login-art { display: none; position: relative; overflow: hidden; background: radial-gradient(120% 90% at 10% 10%, color-mix(in srgb, var(--brand-primary) 55%, var(--color-navy-deep)) 0, var(--color-navy-deep) 55%); color: #fff; }
@media (min-width: 64rem) { .gv-login-art { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3rem 3rem 2.5rem; gap: 2.5rem; } }
.gv-login-blob { position: absolute; border-radius: 999px; filter: blur(60px); opacity: .55; animation: gv-blob 14s ease-in-out infinite; }
.gv-login-blob-1 { width: 26rem; height: 26rem; background: var(--brand-accent); top: -8rem; right: -6rem; }
.gv-login-blob-2 { width: 22rem; height: 22rem; background: var(--color-glow); bottom: -8rem; left: -6rem; opacity: .35; animation-delay: -5s; }
.gv-login-blob-3 { width: 16rem; height: 16rem; background: var(--color-gold); top: 40%; left: 45%; opacity: .25; animation-delay: -9s; }
.gv-login-stage { position: relative; width: min(100%, 44rem); perspective: 1400px; }
.gv-login-screen { position: relative; border-radius: 1.75rem; overflow: hidden; aspect-ratio: 16 / 9; background: #f3f1ec; border: 10px solid rgb(255 255 255 / .12); box-shadow: 0 40px 80px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .15) inset; transform: rotateY(-8deg) rotateX(4deg); animation: gv-tilt 9s ease-in-out infinite; }
.gv-login-v { width: 100%; height: 100%; object-fit: cover; display: block; }
.gv-login-chip { position: absolute; display: flex; align-items: center; gap: .75rem; border-radius: 1.25rem; padding: .75rem 1rem; background: rgb(255 255 255 / .96); color: var(--brand-primary-dark); box-shadow: 0 18px 40px rgb(0 0 0 / .3); animation: gv-float 6s ease-in-out infinite; }
.gv-login-chip span { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; background: var(--color-mint); color: var(--brand-primary); font-size: 1.2rem; font-weight: 900; flex-shrink: 0; }
.gv-login-chip strong { display: block; font-size: 1rem; }
.gv-login-chip small { display: block; font-size: .85rem; color: var(--color-muted); }
.gv-login-chip-1 { left: -2rem; top: -1.5rem; }
.gv-login-chip-2 { right: -1.5rem; top: 38%; animation-delay: -2s; }
.gv-login-chip-2 span { background: var(--color-coral-soft); color: var(--color-coral-dark); }
.gv-login-chip-3 { left: 8%; bottom: -2.25rem; animation-delay: -4s; background: var(--color-glow); }
.gv-login-chip-3 span { background: #fff; }
.gv-login-quote { position: relative; max-width: 36rem; text-align: center; }
.gv-login-quote p { font-family: var(--font-heading, inherit); font-weight: 900; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.15; }
.gv-login-quote ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.25rem; }
.gv-login-quote li { border-radius: 999px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); padding: .45rem 1rem; font-size: 1rem; color: rgb(255 255 255 / .9); }
.gv-login-quote b { color: var(--color-glow); }
@keyframes gv-shine { to { background-position: 300% 0; } }
@keyframes gv-sweep { 0% { left: -60%; } 40%, 100% { left: 130%; } }
@keyframes gv-bounce { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-6deg); } }
@keyframes gv-blob { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -40px) scale(1.1); } 66% { transform: translate(-25px, 25px) scale(.95); } }
@keyframes gv-tilt { 0%, 100% { transform: rotateY(-8deg) rotateX(4deg); } 50% { transform: rotateY(-2deg) rotateX(1deg) translateY(-8px); } }

/* =====================================================================
   MIS CURSOS · tarjetas con anillo de avance
   ===================================================================== */
.gv-cursos { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .gv-cursos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gv-curso { display: flex; flex-direction: column; overflow: hidden; border-radius: 2rem; background: #fff; border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 8%, transparent); box-shadow: 0 1px 3px rgb(0 0 0 / .05); transition: transform .25s, box-shadow .25s; animation: gv-in .6s ease both; animation-delay: var(--d, 0ms); }
.gv-curso:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgb(16 35 56 / .14); }
@media (min-width: 48rem) { .gv-curso.is-first:only-child { grid-column: 1 / -1; flex-direction: row; } .gv-curso.is-first:only-child .gv-curso-media { width: 46%; aspect-ratio: auto; min-height: 20rem; } .gv-curso.is-first:only-child .gv-curso-body { flex: 1; justify-content: center; } }
.gv-curso-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); }
.gv-curso-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gv-curso:hover .gv-curso-media img { transform: scale(1.05); }
.gv-curso-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(14 33 53 / .55), transparent 55%); }
.gv-curso-emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 5rem; }
.gv-curso-tag { position: absolute; z-index: 1; left: 1rem; bottom: 1rem; border-radius: 999px; background: rgb(255 255 255 / .95); color: var(--brand-primary-dark); font-weight: 800; font-size: .95rem; padding: .35rem .9rem; }
.gv-curso-done { position: absolute; z-index: 1; right: 1rem; top: 1rem; border-radius: 999px; background: var(--color-gold); color: var(--brand-primary-dark); font-weight: 900; padding: .4rem .9rem; box-shadow: 0 6px 16px rgb(0 0 0 / .2); }
.gv-curso-body { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.4rem; }
@media (min-width: 40rem) { .gv-curso-body { padding: 1.75rem; } }
.gv-curso-head { display: flex; align-items: center; gap: 1rem; }
.gv-curso-t { font-family: var(--font-heading, inherit); font-weight: 900; font-size: 1.5rem; line-height: 1.2; color: var(--brand-primary-dark); }
.gv-curso-t a:hover { color: var(--brand-primary); }
.gv-curso-s { margin-top: .2rem; font-size: 1.05rem; font-weight: 700; color: var(--color-muted); }
.gv-curso-next { display: flex; align-items: center; gap: .9rem; border-radius: 1.25rem; background: var(--color-sky); padding: .85rem 1rem; }
.gv-curso-next small { display: block; font-size: .95rem; font-weight: 700; color: var(--color-coral-dark); }
.gv-curso-next strong { display: block; font-size: 1.1rem; color: var(--brand-primary-dark); line-height: 1.3; }
.gv-curso-next.is-wait small { color: var(--color-muted); }
.gv-curso-next-ico { display: grid; place-items: center; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: .9rem; background: #fff; font-size: 1.6rem; }
.gv-curso-actions { display: flex; gap: .75rem; margin-top: auto; }
/* Anillo de progreso */
.gv-ring { --p: 0; --s: 4.5rem; position: relative; width: var(--s); height: var(--s); flex-shrink: 0; border-radius: 999px; background: conic-gradient(var(--brand-primary) calc(var(--p) * 1%), var(--color-mint-strong) 0); display: grid; place-items: center; animation: gv-ring-in 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.gv-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 999px; background: #fff; }
.gv-ring span { position: relative; font-weight: 900; font-size: 1.05rem; color: var(--brand-primary-dark); }
.gv-ring-sm { --s: 3.5rem; }
.gv-ring-sm span { font-size: .9rem; }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes gv-ring-in { from { --p: 0; } }

/* =====================================================================
   LECCIÓN · menú de lecciones a la IZQUIERDA (cajón en celular)
   ===================================================================== */
.gv-lesson { display: block; background: var(--color-sky); }
@media (min-width: 64rem) { .gv-lesson { display: grid; grid-template-columns: 22rem minmax(0, 1fr); align-items: start; } }
@media (min-width: 90rem) { .gv-lesson { grid-template-columns: 24rem minmax(0, 1fr); } }
.gv-lnav { position: fixed; z-index: 70; top: 0; bottom: 0; left: 0; width: min(24rem, 88vw); display: flex; flex-direction: column; background: #fff; box-shadow: 20px 0 50px rgb(0 0 0 / .25); transform: translateX(-105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.gv-lnav.is-open { transform: none; }
.gv-lnav-overlay { position: fixed; inset: 0; z-index: 65; background: rgb(14 33 53 / .5); opacity: 0; pointer-events: none; transition: opacity .3s; }
.gv-lnav.is-open + .gv-lnav-overlay { opacity: 1; pointer-events: auto; }
@media (min-width: 64rem) {
  .gv-lnav { position: sticky; top: 5rem; z-index: 1; height: calc(100vh - 5rem); width: auto; transform: none; box-shadow: none; border-right: 2px solid color-mix(in srgb, var(--brand-primary-dark) 8%, transparent); }
  .gv-lnav-overlay, .gv-lnav-x, .gv-lnav-open { display: none !important; }
}
.gv-lnav-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1rem .25rem; }
.gv-lnav-back { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 .75rem; border-radius: .9rem; font-weight: 800; color: var(--brand-primary-dark); }
.gv-lnav-back:hover { background: var(--color-sky); }
.gv-lnav-x { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: var(--color-sky); color: var(--brand-primary-dark); }
.gv-lnav-course { display: flex; align-items: center; gap: .9rem; margin: .5rem 1rem 1rem; padding: 1rem; border-radius: 1.25rem; background: linear-gradient(135deg, var(--color-mint), #fff); }
.gv-lnav-ct { font-family: var(--font-heading, inherit); font-weight: 900; font-size: 1.1rem; line-height: 1.25; color: var(--brand-primary-dark); }
.gv-lnav-cs { margin-top: .15rem; font-size: .95rem; font-weight: 700; color: var(--color-muted); }
.gv-lnav-list { flex: 1; overflow-y: auto; padding: 0 .75rem 2rem; scrollbar-width: thin; }
.gv-lnav-mod + .gv-lnav-mod { margin-top: .5rem; }
.gv-lnav-mod > summary { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: .5rem; min-height: 3.25rem; padding: .5rem .6rem; border-radius: .9rem; background: #fff; font-weight: 900; color: var(--brand-primary-dark); }
.gv-lnav-mod > summary:hover { background: var(--color-sky); }
.gv-lnav-mt { flex: 1; line-height: 1.25; }
.gv-lnav-mc { font-size: .85rem; font-weight: 800; color: var(--brand-primary); background: var(--color-mint); border-radius: 999px; padding: .1rem .55rem; }
.gv-lnav-mod ol { position: relative; display: grid; gap: .3rem; padding: .25rem 0 .5rem; }
.gv-lnav-mod ol::before { content: ""; position: absolute; left: 1.72rem; top: .8rem; bottom: .8rem; width: 2px; background: var(--color-mint-strong); }
.gv-lnav-item { position: relative; display: flex; gap: .75rem; align-items: flex-start; padding: .6rem .6rem; border-radius: 1rem; border: 2px solid transparent; transition: background .2s, border-color .2s; }
a.gv-lnav-item:hover { background: var(--color-sky); }
.gv-lnav-item.is-on { background: var(--color-mint); border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent); box-shadow: 0 6px 16px rgb(0 107 98 / .12); }
.gv-lnav-st { position: relative; z-index: 1; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 999px; background: #fff; border: 2px solid var(--color-mint-strong); font-size: 1.05rem; }
.gv-lnav-item.is-aprobada .gv-lnav-st { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.gv-lnav-item.is-disponible .gv-lnav-st, .gv-lnav-item.is-revision .gv-lnav-st { border-color: var(--brand-accent); }
.gv-lnav-item.is-on .gv-lnav-st { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-primary) 18%, transparent); }
.gv-lnav-item.is-bloqueada, .gv-lnav-item.is-fecha { opacity: .6; }
.gv-lnav-item.is-bloqueada .gv-lnav-st, .gv-lnav-item.is-fecha .gv-lnav-st { color: var(--color-muted); background: #f1f4f5; }
.gv-lnav-n { display: block; font-size: .85rem; font-weight: 800; color: var(--color-muted); }
.gv-lnav-t { display: block; font-weight: 800; line-height: 1.3; color: var(--brand-primary-dark); }
.gv-lnav-why { display: block; margin-top: .15rem; font-size: .85rem; font-weight: 700; color: var(--color-muted); }
.gv-lnav-item.is-revision .gv-lnav-why { color: #9a6a12; }
.gv-lesson-main { min-width: 0; padding: 1.25rem 1rem 7rem; max-width: 60rem; margin: 0 auto; width: 100%; }
@media (min-width: 40rem) { .gv-lesson-main { padding: 1.5rem 1.5rem 7rem; } }
@media (min-width: 64rem) { .gv-lesson-main { padding: 2rem 2.5rem 4rem; } }
.gv-lesson-bar { position: sticky; top: 5rem; z-index: 20; display: flex; align-items: center; gap: 1rem; margin: -.25rem -.25rem 1.25rem; padding: .5rem .25rem; background: color-mix(in srgb, var(--color-sky) 92%, transparent); backdrop-filter: blur(6px); }
@media (min-width: 64rem) { .gv-lesson-bar { position: static; background: none; backdrop-filter: none; justify-content: flex-end; } .gv-lesson-prog { width: 16rem; } }
.gv-lesson-prog { flex: 1; }
.gv-lnav-open { display: inline-flex; align-items: center; gap: .5rem; min-height: 3.25rem; padding: 0 1rem; border-radius: 1rem; background: #fff; color: var(--brand-primary-dark); font-weight: 800; box-shadow: 0 2px 8px rgb(16 35 56 / .1); border: 2px solid color-mix(in srgb, var(--brand-primary) 25%, transparent); }
.gv-lnav-open b { border-radius: 999px; background: var(--brand-primary); color: #fff; font-size: .85rem; padding: .1rem .5rem; }
@media (max-width: 26rem) { .gv-lnav-open span { display: none; } }
.gv-lesson-pn { display: grid; gap: .75rem; margin-top: 1rem; }
@media (min-width: 40rem) { .gv-lesson-pn { grid-template-columns: 1fr 1fr; } }
.gv-pn { display: flex; align-items: center; gap: .9rem; min-height: 5rem; padding: 1rem 1.2rem; border-radius: 1.5rem; background: #fff; color: var(--brand-primary-dark); border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 10%, transparent); transition: transform .2s, border-color .2s, box-shadow .2s; }
a.gv-pn:hover { transform: translateY(-2px); border-color: var(--brand-primary); box-shadow: 0 12px 26px rgb(16 35 56 / .12); }
.gv-pn small { display: block; font-size: .9rem; font-weight: 800; color: var(--color-muted); }
.gv-pn strong { display: block; font-size: 1.05rem; line-height: 1.3; }
.gv-pn-next { justify-content: space-between; text-align: right; }
.gv-pn-next:not(.is-lock) { background: var(--brand-primary); color: #fff; border-color: transparent; }
.gv-pn-next:not(.is-lock) small { color: rgb(255 255 255 / .85); }
.gv-pn.is-lock { opacity: .75; background: #f5f7f8; }
html.gv-lnav-lock { overflow: hidden; }
.gv-dstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.gv-dstats span { display: flex; flex-direction: column; align-items: center; border-radius: 1rem; background: var(--color-sky); padding: .6rem .3rem; font-size: .85rem; font-weight: 700; color: var(--color-muted); text-align: center; }
.gv-dstats b { font-family: var(--font-heading, inherit); font-size: 1.5rem; font-weight: 900; color: var(--brand-primary-dark); line-height: 1.1; }
.gv-dstats .is-hot { background: var(--color-coral-soft); } .gv-dstats .is-hot b { color: var(--color-coral-dark); }
@media (max-width: 40rem) { .gv-login-mobile-video { aspect-ratio: auto; height: 9.5rem; } }
@media (min-width: 64rem) { [data-page="login"] .gv-wa-float { display: none; } }

/* =====================================================================
   REGISTRO PASO A PASO · fecha de nacimiento · tarjeta de usuario y clave
   ===================================================================== */
.js .gv-step:not(.is-on) { display: none; }
.gv-step { animation: gv-in .45s ease both; }
.gv-step-q { display: block; margin-bottom: 1rem; font-family: var(--font-heading, inherit); font-weight: 900; font-size: clamp(1.7rem, 3.6vw, 2.2rem); line-height: 1.15; color: var(--brand-primary-dark); }
.gv-step-hint { margin-top: .75rem; font-size: 1.05rem; color: var(--color-muted); }
.gv-big-in { min-height: 4.5rem !important; font-size: 1.5rem !important; font-weight: 700; }
.gv-wiz-dots { display: flex; gap: .5rem; }
.gv-wiz-dots span { flex: 1; height: .55rem; border-radius: 999px; background: var(--color-mint-strong); opacity: .45; transition: all .3s; }
.gv-wiz-dots span.is-done { background: var(--brand-primary); opacity: 1; }
.gv-wiz-dots span.is-on { background: var(--brand-accent); opacity: 1; }
.gv-wiz-count { margin: .6rem 0 1.4rem; font-weight: 800; color: var(--color-muted); }
.no-js .gv-wiz-count, html:not(.js) .gv-wiz-dots, html:not(.js) .gv-wiz-count, html:not(.js) [data-wiz-next], html:not(.js) [data-wiz-back] { display: none; }
html:not(.js) .gv-step + .gv-step { margin-top: 2rem; }
.gv-wiz-nav { display: flex; gap: .75rem; margin-top: 2rem; }
.gv-wiz-nav [data-wiz-next]:disabled { opacity: .45; }
.gv-sexo-sm span { min-height: 5.5rem; font-size: 1.15rem; }
.gv-sexo-sm span b { font-size: 2rem; }
.gv-fnac-row { display: grid; grid-template-columns: 1fr 1.6fr 1.25fr; gap: .6rem; }
.gv-fnac-row label span { display: block; margin-bottom: .35rem; font-size: .95rem; font-weight: 800; color: var(--color-muted); }
.gv-fsel { min-height: 4.25rem !important; font-size: 1.3rem !important; font-weight: 800; padding-left: .85rem !important; padding-right: 2.2rem !important; background-position: right .6rem center !important; }
.gv-fnac.is-ok .gv-fsel { border-color: var(--brand-primary); }
.gv-fnac.is-no .gv-fsel { border-color: var(--brand-accent); }
.gv-edad-out { min-height: 3.5rem; margin-top: 1rem; }
.gv-edad-ok, .gv-edad-bad { display: inline-flex; align-items: center; gap: .6rem; border-radius: 1.25rem; padding: .8rem 1.2rem; font-size: 1.3rem; font-weight: 700; animation: gv-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.gv-edad-ok { background: var(--color-mint); color: var(--brand-primary-dark); }
.gv-edad-ok b { font-family: var(--font-heading, inherit); font-size: 1.9rem; font-weight: 900; color: var(--brand-primary); }
.gv-edad-ok i { font-style: normal; font-size: 1.8rem; animation: gv-bounce 2s ease-in-out infinite; }
.gv-edad-bad { background: var(--color-coral-soft); color: var(--color-coral-dark); font-size: 1.1rem; }
@keyframes gv-pop { from { opacity: 0; transform: scale(.85) translateY(6px); } to { opacity: 1; transform: none; } }
.gv-mini-ticket { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; border-radius: 1.5rem; padding: 1rem 1.25rem; background: linear-gradient(135deg, var(--color-gold-soft), #fff 75%); border: 2px dashed color-mix(in srgb, var(--color-gold) 70%, transparent); }
.gv-mini-ticket > span { font-size: 2rem; }
.gv-mini-ticket small { display: block; font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.gv-mini-ticket strong { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.35rem; color: var(--brand-primary-dark); }

.gv-cred-page { flex: 1; min-height: 100vh; min-height: 100dvh; background: radial-gradient(90% 70% at 50% 0, var(--color-mint), var(--color-sky) 60%); padding: 1.25rem 1rem 3rem; }
.gv-cred-top { max-width: 44rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gv-cred-wrap { max-width: 40rem; margin: 1.5rem auto 0; text-align: center; }
.gv-cred-kicker { display: inline-block; border-radius: 999px; background: #fff; padding: .45rem 1rem; font-weight: 800; color: var(--brand-primary); box-shadow: 0 4px 14px rgb(0 0 0 / .06); }
.gv-cred-h1 { margin-top: 1rem; font-family: var(--font-heading, inherit); font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.05; color: var(--brand-primary-dark); }
.gv-cred-sub { margin: .9rem auto 0; max-width: 34rem; font-size: 1.2rem; color: var(--color-muted); }
.gv-cred-sub strong { color: var(--brand-primary-dark); }
.gv-ticket { position: relative; margin: 2rem auto 0; text-align: left; border-radius: 2rem; overflow: hidden; background: #fff; box-shadow: 0 30px 60px rgb(16 35 56 / .18); animation: gv-ticket-in .9s cubic-bezier(.2, 1.2, .3, 1) both; }
.gv-ticket::before, .gv-ticket::after { content: ""; position: absolute; top: 58%; width: 2.2rem; height: 2.2rem; border-radius: 999px; background: var(--color-sky); }
.gv-ticket::before { left: -1.1rem; } .gv-ticket::after { right: -1.1rem; }
.gv-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.5rem; background: linear-gradient(120deg, var(--brand-primary), var(--color-navy-deep)); color: #fff; }
.gv-ticket-head img { height: 2.75rem; width: auto; }
.gv-ticket-head span { border-radius: 999px; background: var(--color-glow); color: var(--color-navy-deep); font-weight: 900; font-size: .9rem; padding: .3rem .8rem; white-space: nowrap; }
.gv-ticket-body { padding: 1.4rem 1.5rem 1.25rem; }
.gv-ticket-name { font-weight: 800; color: var(--color-muted); }
.gv-ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.gv-ticket-row small { display: block; font-size: .95rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); }
.gv-ticket-val { display: block; min-height: 1.2em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 900; font-size: clamp(1.8rem, 6vw, 2.6rem); letter-spacing: .02em; color: var(--brand-primary); word-break: break-all; }
.gv-ticket-pass { color: var(--brand-accent); }
.gv-ticket-copy { display: inline-flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 4.75rem; padding: .6rem .7rem; border-radius: 1rem; background: var(--color-sky); color: var(--brand-primary-dark); font-weight: 800; font-size: .9rem; flex-shrink: 0; }
.gv-ticket-copy:hover { background: var(--color-mint); }
.gv-ticket-cut { margin: 1.1rem -1.5rem 0; border-top: 3px dashed var(--color-mint-strong); }
.gv-ticket-foot { margin-top: 1.1rem; font-size: 1rem; color: var(--color-muted); }
.gv-cred-actions { display: grid; gap: .75rem; margin-top: 1.5rem; text-align: left; }
@media (min-width: 40rem) { .gv-cred-actions { grid-template-columns: 1fr 1fr; } }
.gv-cred-btn { display: flex; align-items: center; gap: .9rem; min-height: 4.75rem; padding: .8rem 1.1rem; border-radius: 1.4rem; background: #fff; color: var(--brand-primary-dark); border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 10%, transparent); text-align: left; transition: transform .2s, box-shadow .2s; }
.gv-cred-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgb(16 35 56 / .12); }
.gv-cred-btn strong { display: block; font-size: 1.1rem; }
.gv-cred-btn small { display: block; font-size: .92rem; color: var(--color-muted); }
.gv-cred-btn.is-wa { background: #25d366; color: #fff; border-color: transparent; }
.gv-cred-btn.is-wa small { color: rgb(255 255 255 / .9); }
.gv-cred-go { margin-top: 1.5rem; }
.gv-cred-note { margin-top: 1rem; font-size: 1rem; color: var(--color-muted); }
@keyframes gv-ticket-in { from { opacity: 0; transform: translateY(40px) rotate(-3deg) scale(.95); } to { opacity: 1; transform: none; } }
@media print {
  body[data-page="credenciales"] * { visibility: hidden; }
  body[data-page="credenciales"] #gv-ticket, body[data-page="credenciales"] #gv-ticket * { visibility: visible; }
  body[data-page="credenciales"] #gv-ticket { position: absolute; left: 1cm; right: 1cm; top: 1cm; box-shadow: none; border: 2px solid #ccc; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gv-ticket-copy { display: none; }
}
/* Ajustes de ancho en celular */
.gv-login { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .gv-login { grid-template-columns: minmax(28rem, 1fr) 1.15fr; } }
.gv-login-form, .gv-login-box, .gv-wiz { min-width: 0; }
@media (max-width: 40rem) {
  .gv-wiz-nav .gv-wiz-back { padding-left: 1.1rem; padding-right: 1.1rem; flex-shrink: 0; }
  .gv-wiz-nav .gv-login-btn { padding-left: 1rem; padding-right: 1rem; font-size: 1.25rem !important; }
  .gv-fnac-row { gap: .4rem; }
  .gv-fsel { font-size: 1.1rem !important; padding-left: .6rem !important; padding-right: 1.8rem !important; background-size: 1.1rem !important; }
  .gv-login-top .gv-ts { min-width: 2.5rem; }
}
.gv-ticket-val { word-break: normal; overflow-wrap: anywhere; font-size: clamp(1.5rem, 7.5vw, 2.6rem); }

/* =====================================================================
   FASE DE PRUEBA · 2 preguntas (edad y sexo)
   ===================================================================== */
.gv-prueba-q + .gv-prueba-q { margin-top: 2rem; }
.gv-prueba-q { transition: opacity .3s; }
.gv-prueba-q.is-dim { opacity: .45; }
.gv-qn { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-right: .4rem; border-radius: .8rem; background: var(--brand-accent); color: #fff; font-size: 1.2rem; vertical-align: .2em; }
.gv-anios { display: flex; align-items: stretch; gap: .75rem; }
.gv-anios-btn { width: 4.5rem; flex-shrink: 0; border-radius: 1.25rem; background: var(--color-sky); color: var(--brand-primary-dark); font-size: 2.2rem; font-weight: 900; border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 14%, transparent); transition: background .2s, transform .1s; }
.gv-anios-btn:hover { background: var(--color-mint); }
.gv-anios-btn:active { transform: scale(.95); }
.gv-anios-box { flex: 1; display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 5.5rem; border-radius: 1.5rem; border: 3px solid color-mix(in srgb, var(--brand-primary-dark) 22%, transparent); background: #fff; transition: border-color .2s, box-shadow .2s; }
.gv-anios-box:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-primary) 15%, transparent); }
.is-edad-ok .gv-anios-box { border-color: var(--brand-primary); background: color-mix(in srgb, var(--color-mint) 60%, #fff); }
.gv-anios-box input { width: 5.5rem; border: 0; background: transparent; text-align: center; font-family: var(--font-heading, inherit); font-size: 3rem; font-weight: 900; color: var(--brand-primary-dark); outline: none; -moz-appearance: textfield; }
.gv-anios-box input::-webkit-outer-spin-button, .gv-anios-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gv-anios-box input::placeholder { color: color-mix(in srgb, var(--color-muted) 45%, transparent); }
.gv-anios-box span { font-size: 1.5rem; font-weight: 800; color: var(--color-muted); }
.gv-prueba .gv-continuar { margin-top: 2rem; }
.gv-prueba .gv-continuar:disabled { opacity: .45; }
.gv-prueba-priv { margin-top: 1rem; font-size: 1rem; color: var(--color-muted); text-align: center; }
.gv-prueba-staff { margin-top: 2rem; text-align: center; }
.gv-prueba-staff a { display: inline-flex; min-height: 3rem; align-items: center; font-weight: 700; color: var(--color-muted); text-decoration: underline; text-underline-offset: 4px; }
.gv-prueba-no { margin-top: 1.5rem; display: grid; gap: .6rem; border-radius: 1.75rem; padding: 1.5rem; background: var(--color-gold-soft); border: 2px solid var(--color-gold); color: var(--brand-primary-dark); font-size: 1.15rem; animation: gv-pop .45s both; }
.gv-prueba-no-ico { font-size: 3rem; line-height: 1; }
.gv-prueba-no-t { font-family: var(--font-heading, inherit); font-weight: 900; font-size: 1.6rem; }

/* ---------- Formulario del celular (fase 2) ---------- */
.gv-marcas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 40rem) { .gv-marcas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gv-opciones { display: grid; gap: .75rem; }
.gv-opcion { position: relative; display: block; }
.gv-opcion input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gv-opcion span { display: flex; align-items: center; min-height: 4rem; padding: .8rem 1.1rem; border-radius: 1.25rem; border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 18%, transparent); background: #fff; font-weight: 800; font-size: 1.15rem; color: var(--brand-primary-dark); transition: all .2s; }
.gv-marcas .gv-opcion span { justify-content: center; text-align: center; min-height: 3.75rem; }
.gv-opcion input:checked + span { border-color: var(--brand-primary); background: var(--color-mint); color: var(--brand-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 14%, transparent); }
.gv-opcion input:focus-visible + span { outline: 4px solid color-mix(in srgb, var(--brand-primary) 45%, transparent); }
.gv-guia { margin-top: 1rem; border-radius: 1.5rem; padding: 1.25rem; background: var(--color-sky); border: 2px dashed var(--color-mint-strong); animation: gv-in .35s both; }
.gv-guia-t { font-weight: 900; font-size: 1.2rem; color: var(--brand-primary-dark); }
.gv-guia-l { margin-top: .75rem; display: grid; gap: .6rem; padding-left: 1.2rem; list-style: decimal; font-size: 1.05rem; color: var(--brand-ink); }
.gv-guia-wa { margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1rem; border-radius: 1rem; background: #25d366; color: #fff; font-weight: 800; }
.gv-perfil-res { text-align: center; animation: gv-in .6s both; }
.gv-perfil-lista { margin: 1.5rem 0 0; display: grid; gap: .6rem; text-align: left; }
.gv-perfil-lista li { position: relative; padding: .9rem 1rem .9rem 3rem; border-radius: 1.2rem; background: var(--color-mint); font-weight: 700; color: var(--brand-primary-dark); }
.gv-perfil-lista li::before { content: "✓"; position: absolute; left: 1rem; top: .85rem; font-weight: 900; color: var(--brand-primary); }

/* ---------- Quiz: resultado según la entrega del cliente ---------- */
.gv-quiz-num { font-size: .95rem; font-weight: 900; letter-spacing: .12em; color: var(--brand-accent); margin-bottom: .4rem; }
.gv-quiz-res { margin-top: 1.5rem; font-family: var(--font-heading, inherit); font-weight: 900; font-size: clamp(2.2rem, 6vw, 3rem); color: var(--color-coral-dark); letter-spacing: .02em; }
.gv-quiz-res.is-ok { color: var(--brand-primary); }
.gv-prize-btn { margin: 1.5rem auto 0; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 4rem; padding: 0 1.75rem; border-radius: 1.5rem; background: var(--color-gold); color: var(--brand-primary-dark); font-weight: 900; font-size: 1.25rem; box-shadow: 0 5px 0 0 #aa7216; animation: gv-pulse-ring 2.4s ease-out infinite; }
.gv-prize-btn:active { transform: translateY(2px); box-shadow: none; }
.gv-prize-panel { margin: 1rem auto 0; max-width: 32rem; border-radius: 1.5rem; padding: 1.25rem; background: var(--color-gold-soft); border: 2px solid var(--color-gold); animation: gv-pop .45s both; }
.gv-review { display: grid; gap: .9rem; }
.gv-review-fb { margin-top: .6rem; padding: .7rem .9rem; border-radius: 1rem; background: rgb(255 255 255 / .75); font-size: 1.05rem; color: var(--brand-ink); }
.gv-quiz-rule { margin-top: 1.25rem; text-align: center; font-weight: 800; color: var(--color-muted); }

/* =====================================================================
   ASISTENTE IA · contexto del celular + ANTES / DESPUÉS del prompt
   ===================================================================== */
@media (min-width: 40rem) { .gv-chat { width: 30rem; } }
.gv-chat-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .55rem .75rem 0; background: var(--color-sky); }
.gv-chat-ctx:empty { display: none; }
.gv-chat-ctx-chip { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; background: #fff; padding: .3rem .75rem; font-size: .9rem; font-weight: 800; color: var(--brand-primary-dark); box-shadow: 0 1px 3px rgb(0 0 0 / .06); }
.gv-chat-ctx-chip.is-perfil { background: var(--brand-primary-dark); color: #fff; }
.gv-chat-ctx small { width: 100%; font-size: .82rem; color: var(--color-muted); font-weight: 700; }
.gv-ia-cfg { background: var(--color-sky); border-bottom: 2px solid color-mix(in srgb, var(--brand-primary-dark) 8%, transparent); }
.gv-ia-cfg > summary { display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .35rem .9rem; font-weight: 900; color: var(--brand-primary-dark); }
.gv-ia-cfg > summary span { flex: 1; }
.gv-ia-cfg > summary b { display: grid; place-items: center; min-width: 1.8rem; height: 1.8rem; border-radius: 999px; background: var(--brand-accent); color: #fff; font-size: .9rem; }
.gv-ia-cfg-body { max-height: 46vh; overflow-y: auto; padding: 0 .75rem .8rem; }
.gv-ia-cfg-h { margin: .6rem .15rem .4rem; font-size: .8rem; font-weight: 900; letter-spacing: .08em; color: var(--brand-primary); }
.gv-ia-cfg-h small { font-weight: 700; letter-spacing: 0; color: var(--color-muted); margin-left: .3rem; }
.gv-ia-chips { display: grid; gap: .45rem; }
@media (min-width: 40rem) { .gv-ia-chips { grid-template-columns: 1fr 1fr; } }
.gv-ia-chip { position: relative; display: block; }
.gv-ia-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.gv-ia-chip > span { display: grid; grid-template-columns: 2rem 1fr; column-gap: .45rem; align-items: center; height: 100%; padding: .55rem .65rem; border-radius: 1rem; background: #fff; border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 12%, transparent); transition: all .2s; }
.gv-ia-chip i { grid-row: span 2; font-style: normal; font-size: 1.35rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .7rem; background: var(--color-sky); }
.gv-ia-chip b { font-size: .95rem; line-height: 1.2; color: var(--brand-primary-dark); }
.gv-ia-chip small { font-size: .78rem; line-height: 1.3; color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gv-ia-chip input:checked + span { border-color: var(--brand-primary); background: color-mix(in srgb, var(--color-mint) 70%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent); }
.gv-ia-chip input:checked + span i { background: var(--brand-primary); }
.gv-ia-chip input:checked + span b::after { content: " ✓"; color: var(--brand-primary); }
.gv-ia-chip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--brand-primary) 45%, transparent); }
.gv-ia-ver { margin-top: .7rem; width: 100%; min-height: 2.75rem; border-radius: .9rem; background: #fff; border: 2px dashed var(--color-mint-strong); font-weight: 800; color: var(--brand-primary-dark); }
.gv-ia-prev { margin-top: .5rem; white-space: pre-wrap; font: inherit; font-size: .85rem; line-height: 1.5; background: var(--color-navy-deep); color: #e9f1f7; border-radius: .9rem; padding: .8rem .9rem; max-height: 14rem; overflow-y: auto; }
.gv-msg-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.gv-msg-tags span { font-size: .72rem; font-weight: 800; background: rgb(255 255 255 / .2); border-radius: 999px; padding: .1rem .5rem; }
.gv-fb-prompt { margin-top: .5rem; white-space: pre-wrap; background: #fff; border-radius: .8rem; padding: .6rem .7rem; font-size: .85rem; max-height: 9rem; overflow-y: auto; color: var(--brand-ink); }
.gv-fb-acts { display: grid; gap: .4rem; margin-top: .55rem; }
.gv-fb-acts button, .gv-fb-acts a { display: flex; align-items: center; gap: .45rem; min-height: 2.8rem; padding: .4rem .8rem; border-radius: .9rem; background: #fff; font-weight: 800; font-size: .95rem; color: var(--brand-primary-dark); border: 2px solid color-mix(in srgb, var(--gv-prov, var(--brand-primary)) 35%, transparent); }
.gv-fb-acts button { background: var(--brand-primary); color: #fff; border-color: transparent; justify-content: center; }
.gv-perfil-ia { margin-top: 1.5rem; text-align: left; border-radius: 1.5rem; padding: 1.25rem; background: linear-gradient(135deg, var(--color-navy-deep), var(--brand-primary)); color: #fff; }
.gv-perfil-ia-t { font-family: var(--font-heading, inherit); font-weight: 900; font-size: 1.3rem; }
.gv-perfil-ia-s { margin-top: .4rem; font-size: 1rem; color: rgb(255 255 255 / .85); }
.gv-perfil-ia-g { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; align-items: center; }
.gv-perfil-ia-g small { width: 100%; font-size: .78rem; font-weight: 900; letter-spacing: .08em; color: var(--color-glow); }
.gv-perfil-ia-g span { border-radius: 999px; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .25); padding: .35rem .8rem; font-weight: 800; font-size: .95rem; }
.gv-chat-body { min-height: 6rem; }
@media (max-width: 40rem) { .gv-ia-cfg-body { max-height: 32vh; } }
.gv-chat > * { flex-shrink: 0; } .gv-chat > .gv-chat-body { flex-shrink: 1; }
/* «Un paso más» (formulario del celular después de la bienvenida) */
.gv-paso-extra { display: flex; align-items: center; gap: 1rem; border-radius: 1.75rem; padding: 1.1rem 1.25rem; background: linear-gradient(135deg, var(--color-gold-soft), #fff 80%); border: 2px solid var(--color-gold); color: var(--brand-primary-dark); box-shadow: 0 10px 26px rgb(215 150 37 / .18); transition: transform .2s; }
.gv-paso-extra:hover { transform: translateY(-2px); }
.gv-paso-extra > span:nth-child(2) { flex: 1; }
.gv-paso-extra strong { display: block; font-family: var(--font-heading, inherit); font-size: 1.3rem; font-weight: 900; }
.gv-paso-extra small { display: block; margin-top: .2rem; font-size: 1.05rem; color: var(--color-muted); }
.gv-paso-extra-ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; flex-shrink: 0; border-radius: 1.1rem; background: #fff; font-size: 2rem; animation: gv-bounce 2.8s ease-in-out infinite; }
.gv-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1rem; background: rgb(14 33 53 / .55); backdrop-filter: blur(4px); animation: gv-in .35s both; }
.gv-modal-card { width: min(32rem, 100%); border-radius: 2rem; background: #fff; padding: 2rem 1.5rem 1.5rem; text-align: center; box-shadow: 0 30px 70px rgb(0 0 0 / .35); animation: gv-ticket-in .6s cubic-bezier(.2, 1.2, .3, 1) both; }
.gv-modal-ico { font-size: 3.5rem; line-height: 1; }
.gv-modal-t { margin-top: .75rem; font-family: var(--font-heading, inherit); font-weight: 900; font-size: 1.9rem; line-height: 1.15; color: var(--brand-primary-dark); }
.gv-modal-s { margin: .75rem 0 1.5rem; font-size: 1.15rem; color: var(--color-muted); }
.gv-modal-later { margin-top: .9rem; min-height: 3rem; font-weight: 800; font-size: 1.05rem; color: var(--color-muted); text-decoration: underline; text-underline-offset: 4px; }

/* =====================================================================
   v1.5 · Lección en 6 pasos · accesibilidad (voz) · stickers · preparación
   ===================================================================== */
/* Volver */
.gv-backbar { background: #fff; border-bottom: 2px solid color-mix(in srgb, var(--brand-primary-dark) 6%, transparent); }
.gv-back { display: inline-flex; align-items: center; gap: .5rem; min-height: 3.25rem; padding: 0 .9rem 0 .5rem; margin: .35rem 0; border-radius: 1rem; font-weight: 900; font-size: 1.15rem; color: var(--brand-primary-dark); background: var(--color-sky); }
.gv-back:hover { background: var(--color-mint); }
body[data-page="leccion"] .gv-backbar { position: relative; z-index: 2; }

/* Dictado por voz en campos */
.gv-mic-wrap { position: relative; display: block; width: 100%; }
.gv-mic-wrap > input, .gv-mic-wrap > textarea { padding-right: 4rem !important; }
.gv-mic-btn { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; background: var(--color-sky); color: var(--brand-primary); border: 2px solid color-mix(in srgb, var(--brand-primary) 20%, transparent); transition: background .2s; }
.gv-mic-wrap.is-area .gv-mic-btn { top: auto; bottom: .45rem; transform: none; }
.gv-mic-btn:hover { background: var(--color-mint); }
.gv-mic-btn.is-rec { background: var(--brand-accent); color: #fff; border-color: transparent; animation: gv-pulse-ring 1.2s infinite; }
.gv-mic-wrap[data-hint]::after { content: attr(data-hint); position: absolute; right: 0; bottom: calc(100% + .35rem); background: var(--brand-primary-dark); color: #fff; font-size: .9rem; font-weight: 700; padding: .3rem .7rem; border-radius: .7rem; white-space: nowrap; z-index: 5; }

/* Botón «escuchar» en textos */
.gv-leer-btn { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-left: .45rem; vertical-align: middle; border-radius: 999px; background: var(--color-mint); color: var(--brand-primary); border: 2px solid color-mix(in srgb, var(--brand-primary) 22%, transparent); transition: transform .15s; }
.gv-leer-btn:hover { transform: scale(1.08); }
.gv-leer-btn.is-on { background: var(--brand-primary); color: #fff; animation: gv-pulse-ring 1.4s infinite; }

/* Encabezado y pasos de la lección */
.gv-lec-res { margin-top: .9rem; font-size: 1.2rem; font-weight: 700; color: var(--brand-primary-dark); background: var(--color-gold-soft); border: 2px solid color-mix(in srgb, var(--color-gold) 50%, transparent); border-radius: 1.25rem; padding: .9rem 1.1rem; }
.gv-steps-nav { position: sticky; top: 5.25rem; z-index: 15; display: flex; align-items: center; gap: .3rem; overflow-x: auto; padding: .55rem; margin: 0 -.25rem; border-radius: 1.25rem; background: rgb(255 255 255 / .94); backdrop-filter: blur(6px); box-shadow: 0 4px 16px rgb(16 35 56 / .08); scrollbar-width: none; }
.gv-steps-nav::-webkit-scrollbar { display: none; }
.gv-stepchip { display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0; min-height: 2.75rem; padding: .25rem .75rem .25rem .3rem; border-radius: 999px; font-weight: 800; font-size: .95rem; color: var(--brand-primary-dark); background: var(--color-sky); }
.gv-stepchip-n { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: #fff; font-weight: 900; font-size: .95rem; }
.gv-stepchip.is-ok { background: var(--color-mint); color: var(--brand-primary); }
.gv-stepchip.is-ok .gv-stepchip-n { background: var(--brand-primary); color: #fff; }
.gv-stepchip.is-lock { opacity: .55; }
.gv-stepchip-sep { color: var(--color-muted); font-weight: 900; flex-shrink: 0; }
.gv-paso { position: relative; scroll-margin-top: 9.5rem; border-radius: 2rem; background: #fff; padding: 1.5rem 1.25rem; box-shadow: 0 1px 3px rgb(0 0 0 / .05); }
@media (min-width: 40rem) { .gv-paso { padding: 1.9rem 2rem; } }
.gv-paso-t { display: flex; align-items: center; gap: .7rem; font-family: var(--font-heading, inherit); font-weight: 900; font-size: clamp(1.45rem, 3vw, 1.85rem); line-height: 1.2; color: var(--brand-primary-dark); padding-right: 5rem; }
.gv-paso-t > span { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: .95rem; background: var(--brand-accent); color: #fff; font-size: 1.3rem; }
.gv-paso-s { margin: .6rem 0 1.1rem; font-size: 1.12rem; line-height: 1.6; color: var(--color-muted); }
.gv-vacio { border-radius: 1.25rem; padding: 1rem 1.2rem; background: var(--color-sky); border: 2px dashed var(--color-mint-strong); font-size: 1.1rem; font-weight: 700; color: var(--brand-primary-dark); }
.gv-prep { display: flex; gap: 1rem; align-items: flex-start; border-radius: 1.75rem; padding: 1.25rem 1.4rem; background: linear-gradient(135deg, var(--color-gold-soft), #fff 80%); border: 2px solid var(--color-gold); }
.gv-prep-ico { font-size: 2.4rem; line-height: 1; }
.gv-prep-t { font-family: var(--font-heading, inherit); font-weight: 900; font-size: 1.35rem; color: var(--brand-primary-dark); }
.gv-lockbox { display: flex; gap: .9rem; align-items: flex-start; border-radius: 1.25rem; padding: 1rem 1.2rem; background: #f3f6f7; font-size: 1.5rem; }
.gv-lockbox strong { display: block; font-size: 1.15rem; color: var(--brand-primary-dark); }
.gv-lockbox p { font-size: 1.02rem; color: var(--color-muted); }
/* PDF de apuntes */
.gv-pdf { display: grid; grid-template-columns: auto 1fr; gap: .9rem 1rem; align-items: center; border-radius: 1.5rem; padding: 1.1rem; background: var(--color-sky); border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 8%, transparent); }
.gv-pdf-ico { display: grid; place-items: center; width: 3.6rem; height: 4.3rem; border-radius: .8rem; background: var(--brand-accent); color: #fff; font-weight: 900; box-shadow: inset 0 -6px 0 rgb(0 0 0 / .12); }
.gv-pdf-info strong { display: block; font-size: 1.15rem; color: var(--brand-primary-dark); }
.gv-pdf-info small { display: block; font-size: 1rem; color: var(--color-muted); }
.gv-pdf-acts { grid-column: 1 / -1; display: grid; gap: .6rem; }
@media (min-width: 40rem) { .gv-pdf-acts { grid-template-columns: 1fr 1.3fr; } }
.gv-pdf-voz { grid-column: 1 / -1; font-weight: 700; color: var(--brand-primary-dark); }
.gv-apuntes { margin-top: 1rem; border-radius: 1.25rem; background: #fbfdfc; border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 8%, transparent); padding: .4rem 1rem 1rem; }
.gv-apuntes > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.25rem; font-weight: 900; font-size: 1.1rem; color: var(--brand-primary-dark); }
/* Consulta guiada a la IA */
.gv-paso-ia { background: linear-gradient(180deg, color-mix(in srgb, var(--color-mint) 55%, #fff), #fff 40%); border: 2px solid color-mix(in srgb, var(--brand-primary) 18%, transparent); }
.gv-iax { display: grid; gap: .9rem; }
.gv-iax-ctx { display: flex; flex-wrap: wrap; gap: .4rem; }
.gv-iax-l { font-weight: 900; font-size: 1.1rem; color: var(--brand-primary-dark); }
.gv-iax textarea.is-error { border-color: var(--brand-accent); }
.gv-iax-cfg { border-radius: 1.25rem; border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 8%, transparent); overflow: hidden; }
.gv-iax-cfg .gv-ia-cfg-body { max-height: none; }
.gv-iax-out { display: grid; gap: .75rem; border-radius: 1.5rem; padding: 1.1rem; background: #fff; border: 2px solid var(--brand-primary); box-shadow: 0 14px 34px rgb(0 107 98 / .14); animation: gv-pop .45s both; }
.gv-iax-ok { font-weight: 900; font-size: 1.1rem; color: var(--brand-primary); }
.gv-iax-prompt { white-space: pre-wrap; border-radius: 1rem; padding: .9rem 1rem; background: var(--color-navy-deep); color: #eef5fa; font-size: 1rem; line-height: 1.55; max-height: 16rem; overflow-y: auto; user-select: all; -webkit-user-select: all; }
.gv-iax.is-copied .gv-iax-prompt { outline: 3px solid var(--color-glow); }
.gv-iax-sub { font-weight: 900; color: var(--brand-primary-dark); }
.gv-iax-ias { display: grid; gap: .6rem; }
@media (min-width: 40rem) { .gv-iax-ias { grid-template-columns: repeat(3, 1fr); } }
.gv-iax-tip { font-size: 1rem; color: var(--color-muted); }
.gv-pegar { border-radius: 1.25rem; background: var(--color-sky); padding: .8rem; }
.gv-pegar-tabs { display: flex; gap: .4rem; }
.gv-pegar-tabs button { flex: 1; min-height: 3rem; border-radius: .9rem; font-weight: 800; background: #fff; color: var(--brand-primary-dark); border: 2px solid transparent; }
.gv-pegar-tabs button[aria-selected="true"] { border-color: var(--brand-primary); color: var(--brand-primary); }
.gv-pegar-pasos { margin: .8rem 0 .2rem; display: grid; gap: .55rem; counter-reset: pg; }
.gv-pegar-pasos li { counter-increment: pg; position: relative; padding: .7rem .8rem .7rem 3.1rem; border-radius: 1rem; background: #fff; font-size: 1.05rem; line-height: 1.45; }
.gv-pegar-pasos li::before { content: counter(pg); position: absolute; left: .7rem; top: .65rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .6rem; background: var(--brand-primary-dark); color: #fff; font-weight: 900; }
.gv-iax-resp { border-radius: 1.25rem; padding: 1rem; background: var(--color-sky); }
.gv-iax-rt { font-weight: 900; color: var(--brand-primary); }
.gv-iax-rb { margin: .5rem 0; white-space: pre-wrap; line-height: 1.6; }
/* Tarea práctica */
.gv-tarea { border-radius: 1.5rem; padding: 1.1rem 1.25rem; background: linear-gradient(135deg, var(--color-navy-deep), var(--brand-primary)); color: #fff; }
.gv-tarea-k { font-size: .85rem; font-weight: 900; letter-spacing: .12em; color: var(--color-glow); }
.gv-tarea-t { margin-top: .3rem; font-family: var(--font-heading, inherit); font-weight: 900; font-size: 1.35rem; line-height: 1.3; }
.gv-tarea .gv-leer-btn { background: rgb(255 255 255 / .15); color: #fff; border-color: rgb(255 255 255 / .3); }
.gv-tarea-pasos, .gv-tuto-pasos { margin-top: 1rem; display: grid; gap: .55rem; counter-reset: tp; }
.gv-tarea-pasos li, .gv-tuto-pasos li { counter-increment: tp; position: relative; padding: .75rem .9rem .75rem 3.3rem; border-radius: 1.1rem; background: var(--color-sky); font-size: 1.08rem; line-height: 1.5; }
.gv-tarea-pasos li::before, .gv-tuto-pasos li::before { content: counter(tp); position: absolute; left: .75rem; top: .7rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .7rem; background: var(--brand-accent); color: #fff; font-weight: 900; }
.gv-tuto-link { margin-top: 1rem; display: flex; align-items: center; gap: .9rem; border-radius: 1.4rem; padding: 1rem 1.1rem; background: var(--color-gold-soft); border: 2px solid color-mix(in srgb, var(--color-gold) 60%, transparent); color: var(--brand-primary-dark); font-size: 1.6rem; }
.gv-tuto-link > span { flex: 1; }
.gv-tuto-link strong { display: block; font-size: 1.12rem; }
.gv-tuto-link small { display: block; font-size: 1rem; color: var(--color-muted); }
.gv-wa-tarea { display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 4.75rem; padding: .8rem 1.2rem; border-radius: 1.5rem; background: #25d366; color: #fff; text-align: left; box-shadow: 0 6px 0 #1a9e4b; }
.gv-wa-tarea:active { transform: translateY(3px); box-shadow: none; }
.gv-wa-tarea strong { display: block; font-size: 1.2rem; }
.gv-wa-tarea small { display: block; font-size: .95rem; opacity: .92; }
.gv-tarea-estado { margin-top: 1rem; border-radius: 1.25rem; padding: 1rem 1.2rem; font-size: 1.1rem; background: var(--color-gold-soft); color: var(--brand-primary-dark); }
.gv-tarea-estado.is-aprobada { background: var(--color-mint); }
.gv-tarea-estado.is-devuelta { background: var(--color-coral-soft); border-left: 6px solid var(--brand-accent); }
/* Encuesta */
.gv-encuesta { display: grid; gap: 1.4rem; }
.gv-encuesta legend, .gv-enc-l { display: block; margin-bottom: .6rem; font-weight: 900; font-size: 1.15rem; color: var(--brand-primary-dark); }
.gv-caritas { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.gv-caritas label { position: relative; }
.gv-caritas input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gv-caritas span { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .55rem .2rem; border-radius: 1.1rem; border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 14%, transparent); background: #fff; transition: all .2s; }
.gv-caritas b { font-size: 2rem; line-height: 1.1; filter: grayscale(.6); transition: filter .2s, transform .2s; }
.gv-caritas small { font-size: .78rem; font-weight: 800; color: var(--color-muted); text-align: center; }
.gv-caritas input:checked + span { border-color: var(--brand-primary); background: var(--color-mint); }
.gv-caritas input:checked + span b { filter: none; transform: scale(1.15); }
.gv-opciones-row { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.gv-opciones-row .gv-opcion span { justify-content: center; text-align: center; min-height: 3.5rem; }
.gv-enc-wa { display: flex; align-items: center; gap: .7rem; font-weight: 700; color: var(--brand-primary-dark); }
.gv-enc-wa input { width: 1.5rem; height: 1.5rem; accent-color: var(--brand-primary); }
.gv-gracias { text-align: center; padding: .5rem; }
/* Stickers */
.gv-sticker { position: absolute; top: -.9rem; right: 1rem; z-index: 3; display: inline-block; padding: .45rem .8rem; border-radius: 1rem; background: var(--color-glow); color: var(--color-navy-deep); font-family: var(--font-heading, inherit); font-weight: 900; font-size: .85rem; line-height: 1.15; text-align: center; transform: rotate(5deg); box-shadow: 0 6px 14px rgb(0 0 0 / .15); pointer-events: none; animation: gv-sticker 5s ease-in-out infinite; }
.gv-sticker-r { background: var(--color-gold); transform: rotate(-5deg); }
@keyframes gv-sticker { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media (max-width: 30rem) { .gv-sticker { font-size: .72rem; right: .5rem; } }
/* Empieza aquí y pilares */
.gv-empieza { border-radius: 2rem; background: #fff; padding: 1.25rem; box-shadow: 0 1px 3px rgb(0 0 0 / .05); }
.gv-empieza-g { margin-top: .9rem; display: grid; gap: .6rem; }
@media (min-width: 48rem) { .gv-empieza-g { grid-template-columns: repeat(3, 1fr); } }
.gv-emp { display: flex; gap: .8rem; align-items: center; min-height: 4.5rem; padding: .8rem 1rem; border-radius: 1.25rem; background: var(--color-sky); color: var(--brand-primary-dark); transition: background .2s, transform .2s; }
.gv-emp:hover { background: var(--color-mint); transform: translateY(-2px); }
.gv-emp-ico { display: grid; place-items: center; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: .9rem; background: #fff; font-size: 1.6rem; }
.gv-emp strong { display: block; font-size: 1.02rem; line-height: 1.25; }
.gv-emp small { display: block; font-size: .9rem; color: var(--color-muted); }
.gv-pilares-mini { margin-top: .9rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.gv-pilares-mini a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .1rem; padding: .7rem .4rem; border-radius: 1.2rem; font-size: 1.5rem; color: var(--brand-primary-dark); }
.gv-pilares-mini b { font-size: 1rem; }
.gv-pilares-mini small { font-size: .78rem; font-weight: 700; color: var(--color-muted); line-height: 1.2; }
.is-habitos { background: #eaf7e6; } .is-tecno { background: var(--color-mint); } .is-partic { background: var(--color-coral-soft); }
.gv-pilares { display: grid; gap: .9rem; }
@media (min-width: 48rem) { .gv-pilares { grid-template-columns: repeat(3, 1fr); } }
.gv-pilar { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem; border-radius: 1.5rem; color: var(--brand-primary-dark); transition: transform .2s; }
a.gv-pilar:hover { transform: translateY(-3px); }
.gv-pilar-ico { font-size: 2.4rem; }
.gv-pilar strong { font-family: var(--font-heading, inherit); font-size: 1.5rem; font-weight: 900; }
.gv-pilar small { font-weight: 800; color: var(--color-muted); }
.gv-pilar p { font-size: 1.02rem; line-height: 1.5; }
.gv-pilar em { margin-top: auto; font-style: normal; font-weight: 900; color: var(--brand-primary); }
.gv-ruta { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.gv-ruta span { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .45rem .85rem; background: var(--color-sky); font-weight: 800; color: var(--brand-primary-dark); }
.gv-ruta span:not(:last-child)::after { content: "→"; margin-left: .35rem; color: var(--brand-accent); }
.gv-video-pronto { display: flex; gap: 1rem; align-items: center; border-radius: 1.5rem; padding: 1.4rem; background: linear-gradient(135deg, var(--color-navy-deep), var(--brand-primary-dark)); color: #fff; aspect-ratio: auto; }
.gv-video-pronto > span { font-size: 2.6rem; }
.gv-video-pronto strong { display: block; font-size: 1.2rem; }
.gv-marcas-tuto { display: flex; flex-wrap: wrap; gap: .45rem; }
.gv-marcas-tuto a { min-height: 3rem; display: inline-flex; align-items: center; padding: 0 1rem; border-radius: 999px; background: var(--color-sky); font-weight: 800; color: var(--brand-primary-dark); }
.gv-marcas-tuto a.is-on { background: var(--brand-primary); color: #fff; }
.gv-lead { font-family: var(--font-heading, inherit); font-weight: 900; font-size: 1.5rem; color: var(--brand-primary); }
/* WhatsApp: dos canales */
.gv-wa-stack { position: fixed; z-index: 45; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.gv-wa-stack .gv-wa-float { position: static; }
.gv-app .gv-wa-stack { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 48rem) { .gv-app .gv-wa-stack { bottom: 1.25rem; } }
.gv-wa-float.is-tarea { background: var(--brand-primary-dark); }
.gv-wa-txt { display: inline !important; }
@media (max-width: 40rem) { .gv-wa-float { padding: .7rem 1rem .7rem .7rem; } .gv-wa-txt { font-size: .95rem; } }
@media (max-width: 40rem) {
  .gv-wa-stack .gv-wa-float { padding: .75rem; border-radius: 999px; }
  .gv-wa-stack .gv-wa-txt { display: none !important; }
  .gv-wa-stack .gv-wa-float.is-tarea::after { content: "Tarea"; position: absolute; right: calc(100% + .4rem); background: var(--brand-primary-dark); color: #fff; font-size: .75rem; font-weight: 800; padding: .15rem .45rem; border-radius: .5rem; }
  .gv-wa-stack .gv-wa-float { position: relative; }
}
@media (max-width: 63.99rem) { .gv-steps-nav { top: 9.25rem; } }
/* Sin tarjetas flotantes ni etiquetas bajo la frase */
.gv-login-chip, .gv-login-quote ul { display: none !important; }

/* =====================================================================
   v1.6 · Stickers por sexo · Preferencias de la IA (prototipo del cliente)
   ===================================================================== */
.gv-stk { float: right; width: 6.4rem; height: auto; margin: -2.4rem -.6rem .4rem .8rem; filter: drop-shadow(0 10px 16px rgb(16 35 56 / .18)); transform: rotate(3deg); animation: gv-stk-in .7s cubic-bezier(.2, 1.4, .4, 1) both, gv-sticker 6s ease-in-out .7s infinite; pointer-events: none; shape-outside: margin-box; }
.gv-paso:nth-of-type(even) .gv-stk { transform: rotate(-3deg); }
@media (min-width: 40rem) { .gv-stk { width: 9rem; margin-top: -2.8rem; } }
.gv-stk-sm { width: 6rem; margin-top: -1.8rem; }
@media (min-width: 40rem) { .gv-stk-sm { width: 7.5rem; } }
.gv-stk-modal { float: none; display: block; width: 9rem; margin: -4.5rem auto .25rem; }
.gv-stk-quiz { float: none; display: block; width: 8.5rem; margin: -3.5rem auto .5rem; }
.gv-quiz-card { position: relative; margin-top: 3rem !important; }
.gv-paso, .gv-empieza, .gv-modal-card, .gv-perfil-res, .gv-prefs-hero { overflow: visible; }
.gv-paso-t { padding-right: 0; }
@keyframes gv-stk-in { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gv-stk { animation: none; } }

/* Preferencias de la IA: tarjetas con selección múltiple */
.gv-prefs { display: grid; gap: 1.25rem; }
.gv-prefs-sec { border-radius: 1.4rem; background: #fff; padding: 1.1rem; }
.gv-ia-cfg-body .gv-prefs-sec { padding: .4rem .1rem; background: transparent; }
.gv-prefs-h { font-family: var(--font-heading, inherit); font-weight: 900; font-size: 1.35rem; color: var(--brand-primary-dark); }
.gv-prefs-note { margin: .45rem 0 .9rem; padding: .65rem .85rem; border-radius: .7rem; background: var(--color-mint); border-left: 5px solid var(--brand-primary); font-weight: 700; color: var(--brand-primary-dark); }
.gv-prefs-grid { display: grid; gap: .8rem; }
@media (min-width: 44rem) { .gv-prefs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gv-pref { position: relative; display: block; }
.gv-pref input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; }
.gv-pref-card { position: relative; display: block; min-height: 7rem; padding: 1rem 2.8rem 1rem 1.05rem; border-radius: 1rem; border: 2px solid #d9e2e8; background: #fff; transition: all .18s; user-select: none; }
.gv-pref:hover .gv-pref-card { transform: translateY(-1px); border-color: #a8c9c0; }
.gv-pref-card strong { display: block; font-size: 1.1rem; color: var(--brand-primary-dark); margin-bottom: .35rem; }
.gv-pref-card small { display: block; font-size: 1rem; line-height: 1.45; color: var(--brand-ink); }
.gv-pref-check { position: absolute; top: .8rem; right: .8rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; border: 2px solid #aebbc5; background: #fff; color: transparent; font-weight: 900; font-size: .9rem; transition: all .18s; }
.gv-pref input:checked + .gv-pref-card { background: var(--color-mint); border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent); }
.gv-pref input:checked + .gv-pref-card .gv-pref-check { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; transform: scale(1.08); }
.gv-pref input:focus-visible + .gv-pref-card { outline: 3px solid color-mix(in srgb, var(--brand-primary) 45%, transparent); }
.gv-prefs-sys { margin-top: .9rem; padding: .8rem .9rem; border-radius: .8rem; background: #f6f8fa; border: 1px dashed #a8b7c2; font-size: .95rem; color: var(--brand-ink); }
.gv-prefs-sys b { color: var(--brand-primary-dark); }
.gv-prefs-acts { display: flex; flex-wrap: wrap; gap: .6rem; }
.gv-prefs-btn { min-height: 3.25rem; padding: 0 1.2rem; border-radius: .9rem; font-weight: 800; font-size: 1.05rem; background: #e8edf1; color: var(--brand-primary-dark); }
.gv-prefs-btn.is-primary { background: var(--brand-primary-dark); color: #fff; }
.gv-prefs-out { white-space: pre-wrap; margin: 0; padding: 1rem; border-radius: 1rem; background: #10293d; color: #eef8f5; font-family: ui-monospace, Consolas, monospace; font-size: .92rem; line-height: 1.55; }
.gv-prefs-link { display: inline-flex; min-height: 3rem; align-items: center; margin-top: .6rem; font-weight: 800; color: var(--brand-primary); text-decoration: underline; text-underline-offset: 4px; }
.gv-prefs-hero { position: relative; border-radius: 1.4rem; padding: 1.6rem 1.5rem; background: linear-gradient(135deg, var(--brand-primary-dark), #244b6f); color: #fff; box-shadow: 0 16px 35px rgb(23 50 77 / .15); }
.gv-prefs-hero-k { font-size: .9rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--color-glow); }
.gv-prefs-hero h1 { margin-top: .3rem; font-family: var(--font-heading, inherit); font-weight: 900; font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1.15; }
.gv-prefs-hero p { margin-top: .5rem; font-size: 1.1rem; opacity: .93; }
.gv-prefs-hero-ctx { display: inline-block; border-radius: 999px; background: rgb(255 255 255 / .12); padding: .35rem .9rem; font-weight: 700; }
.gv-prefs-hero .gv-leer-btn { background: rgb(255 255 255 / .15); color: #fff; border-color: rgb(255 255 255 / .3); }
.gv-prefs-form .gv-prefs-sec { box-shadow: 0 8px 25px rgb(23 50 77 / .08); }
.gv-usuario-prev { margin-top: .8rem; border-radius: 1rem; padding: .7rem 1rem; background: var(--color-gold-soft); font-size: 1.1rem; color: var(--brand-primary-dark); }
.gv-usuario-prev b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.2rem; color: var(--brand-primary); }
.gv-cred-home { border-radius: 1.75rem; padding: 1.25rem; background: linear-gradient(135deg, var(--color-gold-soft), #fff 75%); border: 2px dashed color-mix(in srgb, var(--color-gold) 70%, transparent); display: grid; gap: .8rem; }
.gv-cred-home-t { font-family: var(--font-heading, inherit); font-weight: 900; font-size: 1.25rem; color: var(--brand-primary-dark); }
.gv-cred-home-g { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.gv-cred-home-g small { display: block; font-size: .85rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); }
.gv-cred-home-g strong { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 2rem; color: var(--brand-primary); }
.gv-cred-home-a { display: flex; flex-wrap: wrap; gap: .5rem; }
.gv-interactiva { margin-bottom: 1rem; border-radius: 1.5rem; overflow: hidden; border: 3px solid var(--brand-primary); background: #fff; box-shadow: 0 14px 34px rgb(0 107 98 / .14); }
.gv-interactiva-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 1rem; background: var(--brand-primary); color: #fff; font-weight: 800; }
.gv-interactiva-h a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; padding: 0 .8rem; border-radius: .8rem; background: rgb(255 255 255 / .18); color: #fff; font-size: .95rem; }
.gv-interactiva iframe { display: block; width: 100%; min-height: 420px; height: 900px; border: 0; }

/* =====================================================================
   v1.8 · MAPA / TOUR DE APRENDIZAJE + LUPA
   ===================================================================== */
.gv-mapa-hero { position: relative; border-radius: 2rem; padding: 1.6rem 1.5rem; background: linear-gradient(135deg, var(--color-navy-deep), var(--brand-primary)); box-shadow: 0 18px 40px rgb(16 35 56 / .2); }
.gv-mapa-hero .gv-leer-btn { background: rgb(255 255 255 / .15); color: #fff; border-color: rgb(255 255 255 / .3); }
.gv-lupa { position: sticky; top: 5.25rem; z-index: 20; }
.gv-lupa input { width: 100%; min-height: 4rem; padding: 0 1rem 0 3.6rem; border-radius: 1.4rem; border: 3px solid var(--brand-primary); background: #fff; font-size: 1.25rem; font-weight: 700; color: var(--brand-primary-dark); box-shadow: 0 10px 26px rgb(0 107 98 / .15); outline: none; }
.gv-lupa-ico { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--brand-primary); pointer-events: none; z-index: 2; }
.gv-lupa .gv-mic-wrap .gv-mic-btn { right: .55rem; }
.gv-lupa-res { position: absolute; left: 0; right: 0; top: calc(100% + .4rem); max-height: 60vh; overflow-y: auto; border-radius: 1.25rem; background: #fff; box-shadow: 0 24px 50px rgb(16 35 56 / .25); padding: .4rem; }
.gv-lupa-res button { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: .65rem .75rem; border-radius: .9rem; }
.gv-lupa-res button:hover, .gv-lupa-res button:focus { background: var(--color-mint); }
.gv-lupa-res b { display: block; font-size: 1.05rem; color: var(--brand-primary-dark); }
.gv-lupa-res small { display: block; font-size: .9rem; color: var(--color-muted); }
.gv-lupa-i { font-size: 1.4rem; width: 2rem; text-align: center; }
.gv-lupa-n { padding: .5rem .75rem; font-weight: 800; color: var(--color-muted); }
.gv-mapa-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.gv-mapa-filtros { display: flex; gap: .4rem; flex-wrap: wrap; }
.gv-mapa-filtros button { min-height: 2.9rem; padding: 0 1rem; border-radius: 999px; background: #fff; font-weight: 800; color: var(--brand-primary-dark); border: 2px solid transparent; }
.gv-mapa-filtros button.is-on { border-color: var(--brand-primary); background: var(--color-mint); color: var(--brand-primary); }
.gv-mapa-ley { font-size: .95rem; font-weight: 700; color: var(--color-muted); }
.gv-etapa { border-radius: 1.75rem; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .05); overflow: hidden; scroll-margin-top: 10rem; }
.gv-etapa > summary { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; cursor: pointer; }
.gv-etapa-ico { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; flex-shrink: 0; border-radius: 1rem; background: var(--color-sky); font-size: 1.7rem; }
.gv-etapa-tx { flex: 1; min-width: 0; }
.gv-etapa-tx strong { display: block; font-family: var(--font-heading, inherit); font-size: 1.25rem; font-weight: 900; color: var(--brand-primary-dark); }
.gv-etapa-tx small { display: block; font-size: .95rem; color: var(--color-muted); }
.gv-etapa-st { font-weight: 900; color: var(--brand-primary); white-space: nowrap; font-size: .95rem; }
.gv-etapa-body { padding: 0 1rem 1rem; display: grid; gap: .6rem; }
.gv-etapa-obj { padding: .7rem .9rem; border-radius: 1rem; background: var(--color-gold-soft); font-weight: 700; color: var(--brand-primary-dark); }
.gv-fam { border-radius: 1.2rem; background: var(--color-sky); }
.gv-fam > summary { display: flex; align-items: center; gap: .6rem; min-height: 3.3rem; padding: .4rem 1rem; font-weight: 900; color: var(--brand-primary-dark); cursor: pointer; }
.gv-fam > summary span { flex: 1; }
.gv-fam > summary b { font-size: .9rem; color: var(--brand-primary); background: #fff; border-radius: 999px; padding: .1rem .6rem; }
.gv-fam-list { display: grid; gap: .35rem; padding: 0 .5rem .6rem; }
.gv-ml { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: .9rem; background: #fff; color: var(--brand-primary-dark); }
a.gv-ml:hover { background: var(--color-mint); }
.gv-ml-ico { font-size: 1.2rem; width: 1.6rem; text-align: center; }
.gv-ml-n { min-width: 1.9rem; font-weight: 900; color: var(--color-muted); }
.gv-ml-t { flex: 1; min-width: 0; font-weight: 700; }
.gv-ml-t small { display: block; font-size: .82rem; font-weight: 600; color: var(--color-muted); }
.gv-ml-tipo { font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.gv-ml-tipo.is-libre { color: #1f9d55; }
.gv-fam-list li.is-bloqueada .gv-ml, .gv-fam-list li.is-proximamente .gv-ml { opacity: .72; }
.gv-fam-list li.is-aqui .gv-ml { outline: 3px solid var(--brand-accent); background: var(--color-coral-soft); }
.gv-fam-list li.is-hit .gv-ml { outline: 3px solid var(--color-gold); animation: gv-pop .6s both; }
.gv-lang { display: inline-flex; align-items: center; gap: .15rem; padding: .25rem .35rem; border-radius: 1rem; background: var(--color-sky); color: var(--brand-primary-dark); }
.gv-lang a { min-width: 2.3rem; min-height: 2.3rem; display: grid; place-items: center; border-radius: .7rem; font-weight: 900; font-size: .85rem; }
.gv-lang a.is-on { background: var(--brand-primary); color: #fff; }
.gv-tarea-estado.is-apoyo, .gv-tarea-estado.is-escalada, .gv-tarea-estado.is-en_revision { background: var(--color-sky); }
.gv-correccion { margin-top: .8rem; display: grid; gap: .5rem; }
.gv-correccion div { border-radius: .9rem; background: rgb(255 255 255 / .8); padding: .6rem .8rem; }
.gv-correccion dt { font-weight: 900; color: var(--brand-primary-dark); }
.gv-correccion dd { margin: .2rem 0 0; }
.gv-apoyo { margin-top: .9rem; border-radius: 1rem; padding: .9rem 1rem; background: #fff; border: 2px solid var(--brand-primary); }
.gv-jefe-hero { border-radius: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #2F3B45, var(--brand-primary)); display: grid; gap: .4rem; }
.gv-insignia { display: inline-flex; width: max-content; align-items: center; gap: .3rem; border-radius: 999px; padding: .3rem .9rem; background: var(--color-glow); color: var(--color-navy-deep); font-weight: 900; }
.gv-evid { margin-top: .5rem; border-radius: 1.2rem; padding: 1rem; background: var(--color-sky); }
.gv-evid img, .gv-evid video { max-width: 100%; max-height: 520px; border-radius: 1rem; }
.gv-criterios { margin-top: .5rem; display: grid; gap: .4rem; }
.gv-criterios li label { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .8rem; border-radius: .9rem; background: var(--color-mint); font-weight: 700; cursor: pointer; }
.gv-criterios input { width: 1.3rem; height: 1.3rem; margin-top: .15rem; accent-color: var(--brand-primary); }
.gv-corr-form { margin-top: 1.25rem; display: grid; gap: 1rem; border-radius: 1.5rem; padding: 1.2rem; border: 2px solid var(--brand-primary); }
.gv-hist { margin-top: .5rem; display: grid; gap: .4rem; }
.gv-hist li { padding: .6rem .8rem; border-radius: .9rem; background: #f4f7f8; }
.gv-test-bar { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; border-radius: 1rem; padding: .7rem; background: #fff7e6; border: 2px dashed var(--color-gold); }
.gv-test-bar button { min-height: 2.6rem; padding: 0 .9rem; border-radius: .8rem; background: #fff; border: 1px solid var(--color-gold); font-weight: 800; }

/* ---------- Bienvenida posterior al registro: video oficial + tutorial ---------- */
.gv-onboard { position: fixed; inset: 0; z-index: 120; background: radial-gradient(circle at 50% 0%, #fff 0, #f6f3ec 45%, #ece8df 100%); display: grid; place-items: center; padding: clamp(.75rem, 2vw, 1.5rem); transition: opacity .6s ease, transform .6s ease; }
.gv-onboard.is-out { opacity: 0; transform: scale(1.025); pointer-events: none; }
.gv-onboard-stage { position: relative; width: min(1180px, 100%); max-height: calc(100vh - 1.5rem); overflow: auto; border-radius: clamp(1.25rem, 2.5vw, 2rem); background: #fff; box-shadow: 0 28px 80px rgb(16 35 56 / .22); opacity: 0; transform: translateY(12px) scale(.985); transition: opacity .35s ease, transform .35s ease; }
.gv-onboard-stage.is-on { opacity: 1; transform: none; }
.gv-onboard-head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgb(23 50 77 / .09); }
.gv-onboard-head img { width: auto; height: 3.25rem; max-width: 12rem; object-fit: contain; }
.gv-onboard-head div { min-width: 0; display: grid; gap: .1rem; }
.gv-onboard-head strong { color: var(--brand-primary-dark); font-family: var(--font-heading, inherit); font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.15; }
.gv-onboard-head span { color: var(--color-muted); font-size: 1rem; }
.gv-onboard-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #05080c; }
.gv-onboard-media iframe, .gv-onboard-video { width: 100%; height: 100%; border: 0; display: block; background: #05080c; object-fit: contain; }
.gv-onboard-start { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; display: inline-flex; align-items: center; gap: .75rem; padding: 1rem 1.35rem; border-radius: 999px; background: var(--brand-primary); color: #fff; font-size: 1.1rem; font-weight: 900; box-shadow: 0 15px 40px rgb(0 0 0 / .32); }
.gv-onboard-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 1.15rem; }
.gv-onboard-actions p { display: grid; min-width: 0; color: var(--brand-primary-dark); }
.gv-onboard-actions p b { font-size: 1.05rem; }
.gv-onboard-actions p span { color: var(--color-muted); font-size: .95rem; }
.gv-onboard-stage > .gv-intro-bar { position: absolute; top: 0; z-index: 3; }
@media (max-width: 40rem) {
  .gv-onboard { padding: 0; background: #fff; }
  .gv-onboard-stage { width: 100%; min-height: 100vh; max-height: 100vh; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; justify-content: center; }
  .gv-onboard-head { padding: .9rem 1rem; }
  .gv-onboard-head img { height: 2.6rem; max-width: 9rem; }
  .gv-onboard-head span { font-size: .9rem; }
  .gv-onboard-actions { align-items: stretch; flex-direction: column; padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
  .gv-onboard-actions .gv-intro-btn { justify-content: center; width: 100%; }
}


/* ========================================================================
   LECCIÓN · VISOR PDF EN MODAL (solo se activa desde alumno/clase.php)
   ======================================================================== */
.gv-material:is(button) { appearance: none; border: 0; font: inherit; cursor: pointer; }
.gv-pdf-modal[hidden] { display: none !important; }
.gv-pdf-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: clamp(.55rem, 2vw, 1.35rem); }
.gv-pdf-modal-backdrop { position: absolute; inset: 0; background: rgb(14 33 53 / .82); backdrop-filter: blur(9px); }
.gv-pdf-modal-panel { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1180px, 100%); height: min(92dvh, 980px); overflow: hidden; border: 1px solid rgb(255 255 255 / .32); border-radius: 1.6rem; background: #fff; box-shadow: 0 30px 90px rgb(0 0 0 / .32); }
.gv-pdf-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem .85rem 1.2rem; background: var(--brand-primary-dark); color: #fff; }
.gv-pdf-modal-kicker { display: block; margin-bottom: .1rem; font-size: .72rem; font-weight: 900; letter-spacing: .12em; color: var(--color-glow); }
.gv-pdf-modal-head h2 { margin: 0; font-family: var(--font-display, inherit); font-size: clamp(1.05rem, 2.5vw, 1.45rem); font-weight: 900; line-height: 1.15; }
.gv-pdf-modal-close { display: grid; flex: 0 0 auto; place-items: center; width: 3rem; height: 3rem; border: 1px solid rgb(255 255 255 / .24); border-radius: 1rem; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.gv-pdf-modal-close:hover { transform: scale(1.04); background: rgb(255 255 255 / .2); }
.gv-pdf-modal-body { min-height: 0; background: #e9eef3; }
.gv-pdf-modal-body iframe { display: block; width: 100%; height: 100%; min-height: 55dvh; border: 0; background: #fff; }
.gv-pdf-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-top: 1px solid rgb(14 33 53 / .09); background: #fff; color: var(--color-muted); font-size: .95rem; font-weight: 700; }
body.gv-pdf-modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .gv-pdf-modal { padding: 0; }
  .gv-pdf-modal-panel { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .gv-pdf-modal-head { padding: .75rem .75rem .7rem 1rem; }
  .gv-pdf-modal-foot { padding: .6rem .7rem; }
  .gv-pdf-modal-foot span { display: none; }
  .gv-pdf-modal-foot .gv-btn, .gv-pdf-modal-foot button { width: 100%; }
  .gv-pdf-modal-body iframe { min-height: 0; }
}

/* ================================================================
   ETAPA 0 · VISOR DE HTML ORIGINALES
   Mantiene cada archivo HTML aislado para preservar su diseño exacto.
   ================================================================ */
.gv-stage0-original{width:100%;min-width:0;display:grid;gap:1rem}
.gv-stage0-original-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.1rem 1.25rem;border:1px solid rgba(14,33,53,.1);border-radius:1.35rem;background:#fff;box-shadow:0 12px 34px rgba(14,33,53,.08)}
.gv-stage0-original-kicker{margin:0 0 .25rem;color:var(--brand-primary);font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.gv-stage0-original-head h1{margin:0;color:var(--brand-primary-dark);font-size:clamp(1.35rem,2.3vw,2rem);font-weight:900;line-height:1.15}
.gv-stage0-original-head p:not(.gv-stage0-original-kicker){margin:.45rem 0 0;color:#3e5266;font-size:1rem}
.gv-stage0-original-back{display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:.45rem;flex:0 0 auto;padding:.7rem 1rem;border-radius:999px;background:#eef4f1;color:var(--brand-primary-dark);font-weight:800;text-decoration:none}
.gv-stage0-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;padding:.55rem;border:1px solid rgba(14,33,53,.1);border-radius:1.25rem;background:#fff;box-shadow:0 10px 26px rgba(14,33,53,.07)}
.gv-stage0-tab{display:flex;min-height:54px;align-items:center;justify-content:center;gap:.55rem;padding:.7rem .85rem;border:0;border-radius:.95rem;background:transparent;color:#3e5266;cursor:pointer;font:inherit;font-size:1rem}
.gv-stage0-tab span{font-size:1.25rem}.gv-stage0-tab b{font-weight:900}
.gv-stage0-tab:hover{background:#eef4f1;color:var(--brand-primary-dark)}
.gv-stage0-tab.is-active{background:var(--brand-primary);color:#fff;box-shadow:0 8px 20px rgba(0,107,98,.2)}
.gv-stage0-viewers{min-width:0;width:100%}
.gv-stage0-viewer{width:100%;overflow:hidden;border:1px solid rgba(14,33,53,.12);border-radius:1.35rem;background:#fff;box-shadow:0 14px 38px rgba(14,33,53,.09)}
.gv-stage0-viewer[hidden]{display:none!important}
.gv-stage0-viewer iframe{display:block;width:100%;height:max(760px,78vh);min-height:760px;border:0;background:#fff}
@media(max-width:760px){
  .gv-stage0-original-head{display:block;padding:1rem}.gv-stage0-original-back{width:100%;margin-top:.9rem}
  .gv-stage0-tabs{grid-template-columns:1fr;padding:.45rem}.gv-stage0-tab{min-height:48px}
  .gv-stage0-viewer{border-radius:1rem}.gv-stage0-viewer iframe{height:82vh;min-height:650px}
}

/* v1.9 · Imagen completa del curso (sin recortes): la foto entera sobre un fondo difuminado de sí misma */
.gv-curso-media .gv-curso-fondo { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(18px) saturate(1.1); opacity: .75; transform: scale(1.05); }
.gv-curso-media img.gv-curso-img-full { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.gv-curso:hover .gv-curso-media img.gv-curso-img-full { transform: scale(1.02); }
.gv-curso-media::after { z-index: 2; background: linear-gradient(to top, rgb(14 33 53 / .45), transparent 40%); pointer-events: none; }
.gv-curso-media .gv-curso-tag, .gv-curso-media .gv-curso-done { z-index: 3; }
.gv-curso-media-temario { aspect-ratio: 16 / 9; border-radius: 0; }
/* v1.9 · 4.ª pestaña «Consulta IA» y sección de IA en las lecciones de contenido original */
.gv-stage0-tabs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gv-stage0-tab-ia { text-decoration: none; background: linear-gradient(135deg, color-mix(in srgb, var(--color-mint) 80%, #fff), #fff); color: var(--brand-primary-dark); border: 2px solid color-mix(in srgb, var(--brand-primary) 30%, transparent) !important; }
.gv-stage0-tab-ia:hover { background: var(--color-mint); }
.gv-stage0-ia { margin: 1.5rem 0; }
.gv-stage0-ia .gv-paso { scroll-margin-top: 6rem; }
@media (max-width: 40rem) { .gv-stage0-tabs { grid-template-columns: 1fr 1fr; } }
/* v1.9 · El encabezado cabe completo en pantallas de 1280–1535 px (sin barra horizontal) */
@media (max-width: 1535px) {
  .gv-user-name, .gv-ts-label { display: none !important; }
  .gv-topnav-a { padding-left: .7rem !important; padding-right: .7rem !important; gap: .35rem !important; }
}
@media (max-width: 1440px) { .gv-topnav-a svg { display: none; } .gv-lang svg { display: none; } }
html, body { overflow-x: hidden; }

/* =====================================================================
   v1.10 · Línea de 6 pasos (Etapa 0) · Tarea física con grabación · Tu opinión
   ===================================================================== */
.gv-s0-line { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.gv-s0-line .gv-stage0-tab { flex-direction: column; gap: .2rem; text-align: center; font-size: .95rem; line-height: 1.15; padding: .6rem .4rem; }
.gv-s0-n { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 999px; background: #e6eef0; color: var(--brand-primary-dark); font-weight: 900; font-size: .85rem; }
.gv-stage0-tab.is-active .gv-s0-n { background: #fff; color: var(--brand-primary); }
@media (max-width: 64rem) { .gv-s0-line { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 30rem) { .gv-s0-line { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.gv-s0-panel { padding-top: .5rem; }
.gv-s0-panel > .gv-paso-t { margin: .5rem 0 1rem; }
.gv-s0-video { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 1.5rem; overflow: hidden; background: #0b1b2b; box-shadow: 0 18px 40px rgb(0 0 0 / .25); }
.gv-s0-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gv-s0-pronto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; color: #fff; text-align: center; padding: 1.5rem; background: linear-gradient(135deg, var(--color-navy-deep), var(--brand-primary)); }
.gv-s0-pronto span { font-size: 3rem; } .gv-s0-pronto b { font-size: 1.5rem; } .gv-s0-pronto small { font-size: 1.05rem; opacity: .85; }
.gv-s0-next { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.gv-s0-tras-quiz { margin-top: 1rem; border-radius: 1.2rem; padding: .9rem 1.1rem; background: var(--color-gold-soft); border: 2px solid color-mix(in srgb, var(--color-gold) 55%, transparent); font-size: 1.1rem; font-weight: 700; color: var(--brand-primary-dark); }
/* Grabación de la tarea física */
.gv-rec { margin-top: 1.25rem; display: grid; gap: .9rem; border-radius: 1.6rem; padding: 1.25rem; background: #fff; border: 3px solid var(--brand-primary); box-shadow: 0 14px 34px rgb(0 107 98 / .12); }
.gv-rec-t { font-family: var(--font-heading, inherit); font-weight: 900; font-size: 1.4rem; color: var(--brand-primary-dark); }
.gv-rec-pasos { display: grid; gap: .4rem; padding-left: 1.4rem; list-style: decimal; font-size: 1.08rem; color: var(--brand-ink); }
.gv-rec-btns { display: grid; gap: .6rem; }
@media (min-width: 40rem) { .gv-rec-btns { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.gv-rec-btn { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.75rem; padding: .6rem 1rem; border-radius: 1.2rem; font-weight: 900; font-size: 1.1rem; cursor: pointer; border: 2px solid color-mix(in srgb, var(--brand-primary-dark) 15%, transparent); background: var(--color-sky); color: var(--brand-primary-dark); text-align: center; }
.gv-rec-btn.is-rec { background: #c62828; color: #fff; border-color: transparent; }
.gv-rec-btn.is-stop { background: #17324d; color: #fff; border-color: transparent; animation: gv-pulse-ring 1.4s infinite; }
.gv-rec-btn.is-wa { background: #25d366; color: #fff; border-color: transparent; box-shadow: 0 5px 0 #1a9e4b; }
.gv-rec-btn.is-pick { background: var(--color-mint); }
.gv-rec-dot { width: .9rem; height: .9rem; border-radius: 999px; background: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / .35); }
.gv-rec-ayuda { font-size: 1rem; color: var(--color-muted); } .gv-rec-ayuda a { font-weight: 800; color: var(--brand-primary); text-decoration: underline; }
.gv-rec-prev { display: grid; gap: .7rem; border-radius: 1.2rem; padding: .9rem; background: var(--color-sky); }
.gv-rec-prev video, .gv-rec-prev img { width: 100%; max-height: 460px; border-radius: 1rem; background: #000; object-fit: contain; }
.gv-rec-info { font-weight: 800; color: var(--brand-primary-dark); }
.gv-rec-nota { border-radius: .9rem; padding: .7rem .9rem; background: #fff; font-weight: 700; color: var(--brand-primary-dark); }
.gv-rec-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; font-weight: 800; color: var(--brand-primary); text-decoration: underline; background: none; border: 0; cursor: pointer; }
.gv-rec-aviso { font-size: .98rem; color: var(--color-muted); font-weight: 700; }
/* Tu opinión */
.gv-op-btns { display: grid; gap: .7rem; }
@media (min-width: 48rem) { .gv-op-btns { grid-template-columns: 1fr 1fr; } }
.gv-op-btns .gv-wa-tarea { min-height: 4rem; }
.gv-s0-panel .gv-encuesta, .gv-paso .gv-encuesta { padding: 1.25rem; border-radius: 1.5rem; background: #fff; }

/* v1.11 · Mis pagos */
.gv-pago { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .8rem; padding: 1rem 1.1rem; border-radius: 1.2rem; background: #fff; border: 2px solid #e3eaec; }
.gv-pago strong { display: block; font-size: 1.12rem; color: var(--brand-primary-dark); }
.gv-pago small { display: block; font-size: .98rem; color: var(--color-muted); }
.gv-pago > b { font-size: 1.3rem; color: var(--brand-primary-dark); white-space: nowrap; }
.gv-pago.is-venc { border-color: #f1b5aa; background: #fff6f4; }
.gv-pago.is-pronto { border-color: color-mix(in srgb, var(--color-gold) 60%, transparent); background: var(--color-gold-soft); }
@media (max-width: 36rem) { .gv-pago { grid-template-columns: 1fr auto; } .gv-pago > a, .gv-pago > .gv-chip { grid-column: 1 / -1; justify-self: start; } }
.gv-cuentas { display: grid; gap: .7rem; margin: 1rem 0 .5rem; }
@media (min-width: 40rem) { .gv-cuentas { grid-template-columns: 1fr 1fr; } }
.gv-cuentas > div { border-radius: 1.2rem; padding: 1rem; background: var(--color-mint); display: grid; gap: .3rem; justify-items: start; }
.gv-cuentas small { font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; color: var(--brand-primary); }
.gv-cuentas strong { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.5rem; color: var(--brand-primary-dark); }