Narratipos^®

01 · Color

Núcleo

Acentos

Narratipos · 8 colores

02 · Tipografía

03 · Texto · spans & links

04 · Tokens

05 · Layout & utilidades

Contenedores

Secciones con gradiente

.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>

Capas ambientales

Animación de entrada

.fade-up en cualquier bloque hace fade-in + translate al entrar en viewport.

<div class="col fade-up">…</div>

06 · Eyebrow + Rule

Centrado · 3 tramos

<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>

Alineado a la izquierda · 2 tramos

<p class="eyebrow">Qué es</p>
<div class="rule rule--left"><span class="l"></span><span class="d"></span></div>

07 · CTAs

Pareja primaria + secundaria

<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>

Variante hero · entrada animada

<a href="..." class="cta cta--terra cta--hero-anim">Solicitar acceso</a>

Pareja en hero · sky con shimmer + Brochure underline

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>

Pareja en inversión · sky sobre navy

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>

Variante WhatsApp · comunidad

Variante en verde WhatsApp con icono SVG (CSS mask) y el mismo shimmer diagonal de .cta--hero-anim. Usada en la página de gracias para invitar a la comunidad. Selector actual: .cta--whatsapp + .wa-icon (en la landing gracias — pendiente promocionar a branding/.../includes/style.css).

<a href="https://chat.whatsapp.com/…" target="_blank" rel="noopener noreferrer"
   class="cta cta--whatsapp">
  <span class="wa-icon" aria-hidden="true"></span>
  ¡Entrar a la Comunidad!
</a>

08 · Navegación

En móvil se sustituye por un toggle .nav-toggle que abre el overlay .nav-overlay con la marca centrada y la lista vertical.

09 · Editorial Split

<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

<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.

<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>

Modal · estructura única reutilizable

<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

Símbolo

Calendario · Momentos Narratipos

Banda navy con el listado de encuentros del proceso de inmersión.

18 · Icon card

Tarjeta vertical centrada con icono cuadrado terra, título serif en mayúsculas y descripción corta sans. Usada en la sección "¿Qué descubrirás?" de Crea tu Narrativa para destacar tres beneficios. El fondo es translúcido para que el ambient wine del fondo se sienta a través.

<article class="icon-card">
  <span class="icon-card__icon" aria-hidden="true"><svg>…</svg></span>
  <h3 class="icon-card__title">Conexión Auténtica</h3>
  <p class="icon-card__desc">Llega al <strong>corazón</strong> de tus clientes…</p>
</article>

Origen actual: landings/narratipos/crea-tu-narrativa/includes/style.css bajo el prefijo .ctn-card. Pendiente: promocionar a .icon-card en branding/.../includes/style.css cuando otra landing lo necesite.

19 · Event card

Tarjeta para presentar un evento o taller con badge superior terra (con punto pulsante), título serif y meta-lista (hora, modalidad, idioma) con iconos terra. Usada como "¡Solicita una invitación privada!" en el hero de Crea tu Narrativa.

<aside class="event-card">
  <p class="event-card__badge">Taller Online · 120 min</p>
  <h2 class="event-card__title">¡Solicita una invitación privada!</h2>
  <p class="event-card__lead">…</p>
  <ul class="event-card__meta">
    <li><span class="event-card__meta-icon"><svg>…</svg></span> …</li>
  </ul>
</aside>

Origen actual: .ctn-event* en la landing. Promoción a .event-card* a brand-level recomendada para reuso en futuras landings de eventos.

20 · Last-call card

Tarjeta de cierre con grid 2-col: símbolo llave a la izquierda (con halo terra animado en la landing) y claim serif + lead + CTA a la derecha. Borde terra a la izquierda como acento. Usada en la sección "Esta es la oportunidad de crear tu narrativa."

Esta es la oportunidad de crear tu narrativa.

Reserva tu plaza en la sesión privada y empieza a posicionarte donde tus clientes te puedan encontrar.

¡Quiero una Invitación!

<div class="last-call-card">
  <div class="last-call-card__llave"><img src="…logo-llave.png" alt="" /></div>
  <div>
    <h2 class="last-call-card__claim">Esta es la <em>oportunidad</em>…</h2>
    <p class="last-call-card__lead">…</p>
    <a href="#" class="cta cta--terra cta--hero-anim">¡Quiero una Invitación!</a>
  </div>
</div>

Origen actual: .ctn-final__card en la landing (incluye animación llaveBreath + llaveFloat en el símbolo, omitidas en este preview).

21 · Calendar card

Tarjeta visual de fecha — banner terra con mes, cuerpo oscuro con día grande serif, footer con hora e icono reloj. Usada en la página de gracias como recordatorio del taller. Compacta (220px) y autoexplicativa.

<figure class="cal-card" role="img" aria-label="Lunes 01 de Junio del 2026, 18:00">
  <div class="cal-card__banner">Junio&nbsp;2026</div>
  <div class="cal-card__body">
    <span class="cal-card__weekday">Lunes</span>
    <span class="cal-card__day">01</span>
  </div>
  <div class="cal-card__foot"><svg>…</svg> 18:00h&nbsp;(España)</div>
</figure>

Origen actual: .ctng-cal* en la landing gracias.

22 · Video embed (Bunny)

Marco 16:9 estricto para embeber un vídeo de Bunny Stream. Usa .media-card + .media-card--video + .media-card__frame (todos definidos a nivel de brand). El frame combina padding-top: 56.25% (fallback) con aspect-ratio: 16/9 (motores modernos) para garantizar el ratio en cualquier Safari móvil.

<section class="media-card media-card--video" aria-label="Vídeo introductorio">
  <div class="media-card__frame">
    <iframe
      src="https://player.mediadelivery.net/embed/<library>/<video-id>?autoplay=false&responsive=true"
      title="…"
      loading="lazy"
      allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture"
      allowfullscreen></iframe>
  </div>
</section>

23 · Audio player

Reproductor custom para <audio> con controles brand: botón redondo terra de play/pausa, barra de progreso clickable con tiempo actual y duración, y toggle de mute. El <audio> nativo se queda oculto vía CSS y la lógica se inicializa sola al cargar la página desde la behaviour bundle del brand (auto-detecta cada .audio-player). Usado en las píldoras narrativas (pil01/02/03) como alternativa al vídeo Bunny cuando el usuario prefiere consumir el contenido en audio.

<figure class="audio-player">
  <audio class="audio-player__el" src="…m4a" preload="metadata"></audio>
  <button class="audio-player__play">…</button>
  <div class="audio-player__progress-row">
    <span class="audio-player__current">0:00</span>
    <div class="audio-player__progress" role="slider">
      <div class="audio-player__progress-fill"></div>
    </div>
    <span class="audio-player__duration">0:00</span>
  </div>
  <div class="audio-player__volume-group">
    <button class="audio-player__volume">…</button>
    <div class="audio-player__volume-bar" role="slider">
      <div class="audio-player__volume-fill"></div>
    </div>
  </div>
</figure>

24 · Media toggle (vídeo / audio)

Pareja de botones segmentados (estilo "tab pills") para elegir cómo consumir un contenido: vídeo o audio. El JS de brand lo enlaza automáticamente: clic en un botón intercambia qué .media-panel es visible (por data-target / data-media) y sincroniza la elección a la URL como ?t=video o ?t=audio (deep-link / refresh-friendly). Estado inicial: ?t=audio abre el audio; en cualquier otro caso abre el vídeo.

<div class="media-toggle" role="tablist">
  <button type="button" class="media-toggle__btn is-active" data-target="video" role="tab">
    <svg>…</svg> Vídeo
  </button>
  <button type="button" class="media-toggle__btn" data-target="audio" role="tab">
    <svg>…</svg> Audio
  </button>
</div>

<section class="media-panel is-active" data-media="video">…</section>
<section class="media-panel" data-media="audio">…</section>

Demo aislada: este toggle en el DS no controla paneles reales para no chocar con los de otras secciones de la página. La clase ds-toggle-demo evita que el JS lo enganche por error (selecciona el primer .media-toggle de la página).

25 · Píldora progress

Fila compacta de tres cards que indica al usuario en qué punto de la serie de píldoras está. Cada card lleva uno de tres modificadores que el JS de brand asigna en tiempo de ejecución a partir de data-pil-current en el <nav> y un set de píldoras visitadas persistido en localStorage: --current (la que se está viendo, borde terra + glow, click prevenido), --unlocked (ya visitada en otra sesión o en la misma — link real al destino), y --locked (no visitada todavía, icono de candado, click prevenido). Cada landing renderiza las tres cards como <a> con ambos SVGs (pill + lock) bakeados; el CSS muestra el correcto según el modificador. La regla práctica: una vez completas las 3, todas las cards quedan desbloqueadas para siempre — vuelve a la 1/3 desde la 3/3 y la navegación entre ellas sigue funcionando.

Demos sin data-pil-current — el JS los ignora así que conservan los modificadores estáticos que se ven aquí.

<nav class="pil-progress" data-pil-current="2" aria-label="Progreso de la serie de píldoras">
  <a href="../crea-tu-narrativa-pil01/" data-pil-index="1" class="pil-progress__card">
    <span class="pil-progress__icon" aria-hidden="true">
      <svg class="pil-progress__icon-svg pil-progress__icon-svg--pill">…</svg>
      <svg class="pil-progress__icon-svg pil-progress__icon-svg--lock">…</svg>
    </span>
    <span class="pil-progress__label">1/3</span>
  </a>
  <a href="../crea-tu-narrativa-pil02/" data-pil-index="2" class="pil-progress__card">…</a>
  <a href="../crea-tu-narrativa-pil03/" data-pil-index="3" class="pil-progress__card">…</a>
</nav>

<!-- The brand IIFE reads data-pil-current, marks it as visited
     in localStorage, then assigns --current / --unlocked / --locked
     to each card based on which pildoras have been visited. -->