01 · Color
02 · Tipografía
XI Edición · 2026
Aprende a dominar las primeras impresiones dejando una huella imborrable en la mente de las personas.
En un mundo donde todos forman parte de un rebaño, saber encontrar tu propia narrativa personal te hará realmente visible.
03 · Texto · spans & links
| Clase | Uso | Preview |
|---|---|---|
.silver |
tinte plata para titulares | Certificación |
.terra-tx |
realce terra dentro de h-title | Narratipos |
.sky-tx |
realce azul cielo | Sobrino |
.link-inline |
link discreto en bloque editorial | Narratipos: los 8 patrones |
.br-mobile |
salto de línea solo <900px | visible bajo 900px |
.hide-mobile |
oculta en móvil | desktop only |
04 · Tokens
| Token | Valor | Uso |
|---|---|---|
--accent |
var(--terra) | CTAs, eyebrows, líneas, glows |
--accent-deep |
var(--terra-deep) | hover de CTAs, sombra interna |
--accent-soft |
rgba(212,132,95,.18) | halos, fondos suaves |
--serif |
"Cinzel" | display, titulares, naming |
--sans |
"Poppins" | cuerpo, navegación, eyebrows |
--script |
"Allura" | realces ornamentales |
--col |
min(1180px, 92vw) | columna principal |
--col-narrow |
min(820px, 92vw) | bloques editoriales |
--line |
rgba(255,255,255,.08) | separadores discretos |
--line-strong |
rgba(255,255,255,.18) | bordes activos |
05 · Layout & utilidades
| Clase | Función |
|---|---|
.col |
columna ancha · max 1180px |
.col-narrow |
columna editorial · max 820px |
.center |
centra texto y bloques (eyebrow + rule + título) |
.blend aplica un gradiente vertical entre dos colores
definidos por las custom properties --from y
--to:
<section class="blend" style="--from:var(--wine);--to:var(--navy)">…</section>
| Clase | Función |
|---|---|
.amb-stars |
añade capa de estrellas con parpadeo sutil |
.amb-glow |
halo terra radial (combinable con .amb-stars) |
.amb-mark |
octógono ambiental rotando · uso reservado |
.fade-up en cualquier bloque hace fade-in + translate
al entrar en viewport.
<div class="col fade-up">…</div>
06 · Eyebrow + Rule
Para quién es esta
<p class="eyebrow">Para quién es esta</p> <div class="rule"><span class="l"></span><span class="d"></span><span class="l"></span></div>
Qué es
<p class="eyebrow">Qué es</p> <div class="rule rule--left"><span class="l"></span><span class="d"></span></div>
07 · CTAs
<div class="cta-row"> <a href="..." class="cta cta--terra">Solicitar acceso</a> <a href="..." class="cta cta--ghost" download>Ver el Brochure</a> </div>
<a href="..." class="cta cta--terra cta--hero-anim">Solicitar acceso</a>
Dentro de .hero el primario muta a sky/azul con
brillo diagonal continuo, y el secundario pierde marco para quedar
como texto con underline.
<section class="hero">
<div class="cta-row">
<a href="..." class="cta cta--terra">Solicitar acceso</a>
<a href="..." class="cta cta--ghost">Ver el Brochure</a>
</div>
</section>
En la sección de inversión, el primario adopta el tono
--sky sobre navy con halo claro. El Brochure sigue
como ghost outline.
<section class="inversion">
<div class="cta-row">
<a href="..." class="cta cta--terra">Solicitar acceso</a>
<a href="..." class="cta cta--ghost">Ver el Brochure</a>
</div>
</section>
09 · Editorial Split
Para quién es esta
Personas singulares con talentos únicos.
Profesionales y emprendedores conscientes y reflexivos, alfabetizados en su propio oficio, que ya saben que diferenciarse no es opcional.
Para quienes se atreven a sostener su singularidad como ventaja real de mercado.
<div class="editorial fade-up">
<div>… eyebrow + h-title + rule + lede + p + p.editorial__cierre …</div>
<div class="editorial__photo">
<img src="…" alt="…" />
<span class="editorial__photo-credit">…</span>
</div>
</div>
10 · Aprende Card
Contenidos con estrategia, naturalidad y diferenciación, comprendidos única y exclusivamente por las personas que quieres atraer conscientemente.
Eliminando de la ecuación las cuentas falsas y el sentirte un muñeco familiar.
Tus propias experiencias, el lenguaje metafórico y la capacidad de comprender el alma de tu cliente boutique.
No te hará falta llegar a miles de personas, sino a clientes boutique que te percibirán como una pieza de colección.
Profundiza en los conocimientos prácticos más herméticos, esotéricos e impactantes que mueven los hilos de la mente colectiva.
Dejarás de sentirte estancado para moverte en un ascensor de ida y vuelta entre la Supraconciencia y el plano físico.
<article class="aprende"> <div class="aprende__num">i</div> <h3 class="aprende__title">…</h3> <p class="aprende__lead">…</p> <p class="aprende__note">…</p> </article>
11 · Módulo Card
Cada módulo recibe un color propio vía
style="--c:var(--narratipo-sensitivo)". La banda
lateral, los descriptores y el hover heredan ese color.
Profundizamos en los entresijos de tu narrativa interna para detectar cada uno de los mimbres mentales que forjan tu identidad única.
Más allá del conflicto, existen capas invisibles donde se construyen tramas de impacto: la curiosidad como motor magnético.
<article class="modulo" style="--c:var(--narratipo-sensitivo)"> <div class="modulo__band"></div> <div class="modulo__num">Módulo 1</div> <h3 class="modulo__title">Mindset Narrativo</h3> <div class="modulo__sub"><span>…</span><span>…</span></div> <p class="modulo__desc">…</p> </article>
12 · Precio Card
13 · Bono Card + Modal
<article class="bono" tabindex="0" role="button" aria-haspopup="dialog"
data-bono-image="…" data-bono-label="Bono 1" data-bono-name="Viral">
<img class="bono__visual" src="…" alt="…" />
<div class="bono__caption">
<div class="bono__label">Bono 1</div>
<div class="bono__name">Viral</div>
<span class="bono__hint">Ver detalle</span>
</div>
</article>
<div class="bono-modal" id="bono-modal" role="dialog" aria-modal="true" aria-hidden="true">
<div class="bono-modal__dialog">
<button class="bono-modal__close" type="button" aria-label="Cerrar">×</button>
<img class="bono-modal__image" src="" alt="" />
<div class="bono-modal__caption"><b></b> · <span></span></div>
</div>
</div>
14 · FAQ
<div class="faq__list">
<details class="faq__item">
<summary>Pregunta</summary>
<div class="faq__panel"><div class="faq__answer">Respuesta.</div></div>
</details>
</div>
15 · Cierre
<section id="acceso" class="cierre">
<div class="col-narrow fade-up">
<img src="…" alt="" class="cierre__symbol" />
<h2 class="cierre__claim">
<span class="cierre__line">Ya no se trata de ser mejor.</span>
<span class="cierre__line">Tampoco de ser el primero.</span>
<span class="cierre__unico">Se trata de ser <em>único</em>.</span>
</h2>
</div>
</section>
16 · Back-to-top
<button type="button" class="back-to-top" id="back-to-top" aria-label="Volver arriba"> <svg viewBox="0 0 14 14">…</svg> </button>
17 · Elementos
Banda navy con el listado de encuentros del proceso de inmersión.
Proceso de inmersión especial
Seis encuentros especiales en directo, de dos horas cada uno, durante el primer trimestre del año en grupo reducido y privado.