Three self-contained blocks ready to drop into GoHighLevel. {{custom_values.*}} tokens are kept verbatim — GHL substitutes them server-side using the values below.
Visual preview: https://lp-pre.laboutiquedementores.es/narratipos/la-certificacion/
Paste into the GHL Custom HTML element. {{custom_values.*}} stays verbatim — GHL substitutes server-side using the values listed at the bottom.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Inicio | {{custom_values.narratipos_brand_name}}</title>
<meta
name="description"
content="La primera tecnología empírica que revela la arquitectura comunicativa según tu identidad y tus patrones psicológicos."
/>
<!-- Autoría y propiedad intelectual -->
<meta
name="author"
content="{{custom_values.la_boutique_de_mentores_brand_name}}, David Sobrino"
/>
<meta
name="copyright"
content="© {{now.year}} {{custom_values.la_boutique_de_mentores_brand_name}}"
/>
<meta
name="publisher"
content="{{custom_values.la_boutique_de_mentores_brand_name}}"
/>
<meta
name="theme-color"
content="{{custom_values.narratipos_brand_color}}"
/>
<meta name="color-scheme" content="dark" />
<link rel="canonical" href="{{custom_values.narratipos_root_url}}" />
<!-- Créditos técnicos -->
<meta name="designer" content="Innki Tech" />
<meta name="developer" content="Innki Tech" />
<meta name="generator" content="Innki Tech" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:locale" content="es_ES" />
<meta
property="og:site_name"
content="{{custom_values.narratipos_brand_name}}"
/>
<meta
property="og:title"
content="Inicio | {{custom_values.narratipos_brand_name}}"
/>
<meta
property="og:description"
content="La primera tecnología empírica que revela la arquitectura comunicativa según tu identidad y tus patrones psicológicos."
/>
<meta
property="og:image"
content="{{custom_values.narratipos_brand_image}}"
/>
<meta property="og:url" content="{{custom_values.narratipos_root_url}}" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="Inicio | {{custom_values.narratipos_brand_name}}"
/>
<meta
name="twitter:description"
content="La primera tecnología empírica que revela la arquitectura comunicativa según tu identidad y tus patrones psicológicos."
/>
<meta
name="twitter:image"
content="{{custom_values.narratipos_brand_image}}"
/>
<!-- Favicons / PWA -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/49c9e4ae-9fae-4e4e-9069-e760929b377b.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/8b76f5c1-7250-4925-b6c1-bee0ef1a2ffd.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/18f5bd2b-742f-4993-b9d9-59e258099353.png"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="preconnect"
href="https://assets.cdn.filesafe.space"
crossorigin
/>
<!-- Google Fonts Async -->
<noscript
></noscript>
<!-- Schema.org · JSON-LD -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Person",
"@id": "{{custom_values.narratipos_root_url}}#david-sobrino",
"name": "David Sobrino",
"jobTitle": "Mentor y creador de Narratipos®",
"url": "{{custom_values.narratipos_root_url}}"
},
{
"@type": "Organization",
"@id": "{{custom_values.la_boutique_de_mentores_root_url}}#organization",
"name": "{{custom_values.la_boutique_de_mentores_brand_name}}",
"url": "{{custom_values.la_boutique_de_mentores_root_url}}",
"logo": "{{custom_values.la_boutique_de_mentores_brand_image}}",
"founder": {
"@id": "{{custom_values.narratipos_root_url}}#david-sobrino"
}
},
{
"@type": "Organization",
"@id": "https://www.innki.tech#organization",
"name": "Innki Tech",
"url": "https://www.innki.tech"
},
{
"@type": "WebSite",
"@id": "{{custom_values.narratipos_root_url}}#website",
"url": "{{custom_values.narratipos_root_url}}",
"name": "{{custom_values.narratipos_brand_name}}",
"inLanguage": "es-ES",
"publisher": {
"@id": "{{custom_values.la_boutique_de_mentores_root_url}}#organization"
}
},
{
"@type": "WebPage",
"@id": "{{custom_values.narratipos_root_url}}#webpage",
"url": "{{custom_values.narratipos_root_url}}",
"name": "Inicio | {{custom_values.narratipos_brand_name}}",
"isPartOf": {
"@id": "{{custom_values.narratipos_root_url}}#website"
},
"inLanguage": "es-ES",
"author": {
"@id": "{{custom_values.narratipos_root_url}}#david-sobrino"
},
"creator": { "@id": "https://www.innki.tech#organization" },
"creditText": "Diseño y desarrollo web por Innki Tech",
"publisher": {
"@id": "{{custom_values.la_boutique_de_mentores_root_url}}#organization"
},
"mainEntity": {
"@id": "{{custom_values.narratipos_root_url}}#course"
}
},
{
"@type": "Course",
"@id": "{{custom_values.narratipos_root_url}}#course",
"name": "Narratipos® · Certificación",
"description": "La primera tecnología empírica que revela la arquitectura comunicativa según tu identidad y tus patrones psicológicos.",
"url": "{{custom_values.narratipos_root_url}}",
"image": "{{custom_values.narratipos_brand_image}}",
"inLanguage": "es-ES",
"educationalLevel": "Profesional",
"timeRequired": "P12M",
"educationalCredentialAwarded": "Certificado Narratipos®",
"provider": {
"@id": "{{custom_values.la_boutique_de_mentores_root_url}}#organization"
},
"author": {
"@id": "{{custom_values.narratipos_root_url}}#david-sobrino"
},
"hasCourseInstance": {
"@type": "CourseInstance",
"name": "Undécima Edición · 2026",
"courseMode": "blended",
"eventAttendanceMode": "https://schema.org/OnlineEventAttendanceMode",
"startDate": "2026-06-01",
"inLanguage": "es-ES",
"instructor": {
"@id": "{{custom_values.narratipos_root_url}}#david-sobrino"
}
},
"hasPart": [
{ "@type": "Course", "name": "Módulo 1 · Mindset Narrativo" },
{ "@type": "Course", "name": "Módulo 2 · Macro Narrativas" },
{ "@type": "Course", "name": "Módulo 3 · Narrativa Personal" },
{
"@type": "Course",
"name": "Módulo 4 · Arquitectura Comunicativa"
},
{
"@type": "Course",
"name": "Módulo 5 · Storyselling de Alto Valor"
},
{ "@type": "Course", "name": "Módulo 6 · Narrativa Singular" },
{ "@type": "Course", "name": "Módulo 7 · Transformación" },
{ "@type": "Course", "name": "Módulo 8 · Conexión y Patrimonio" }
]
},
{
"@type": "Product",
"@id": "{{custom_values.narratipos_root_url}}#product",
"name": "Narratipos® · Certificación",
"description": "La primera tecnología empírica que revela la arquitectura comunicativa según tu identidad y tus patrones psicológicos.",
"url": "{{custom_values.narratipos_root_url}}",
"image": "{{custom_values.narratipos_brand_image}}",
"brand": {
"@id": "{{custom_values.la_boutique_de_mentores_root_url}}#organization"
},
"offers": [
{
"@type": "Offer",
"name": "Pago único",
"price": "3960",
"priceCurrency": "EUR",
"availability": "https://schema.org/LimitedAvailability",
"url": "{{custom_values.narratipos_request_access_url}}"
},
{
"@type": "Offer",
"name": "12 cuotas",
"price": "369",
"priceCurrency": "EUR",
"availability": "https://schema.org/LimitedAvailability",
"url": "{{custom_values.narratipos_request_access_url}}",
"priceSpecification": {
"@type": "UnitPriceSpecification",
"price": "369",
"priceCurrency": "EUR",
"billingDuration": "P1M",
"billingIncrement": 12,
"unitText": "cuota mensual"
}
}
]
},
{
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "{{custom_values.narratipos_brand_name}}",
"item": "{{custom_values.narratipos_root_url}}"
}
]
}
]
}
</script>
</head>
<body>
<!-- HEADER -->
<header class="site-header">
<div class="col">
<a href="#" class="site-header__brand" aria-label="Narratipos">
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/45fb080c-07fc-4ee6-ab2b-a94a8141a940.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/49f4540b-1586-43e2-ab95-0626cc68e9b4.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/32e17f4f-a9b8-4e83-b8d3-1d8abdd4ca01.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/c0391821-f877-4eb3-8d07-f48cfd55c3c0.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/efac942b-f650-40db-80d4-49458e9049d1.webp 1920w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/4f539274-8c0b-46d2-ab70-29b8134813b5.webp 2423w" sizes="(max-width: 640px) 100vw, 2423px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/82300a32-bba9-4249-b5b7-201750453acd.png" class="site-header__mark" alt="" width="36" height="36" decoding="async" />
</picture>
<span class="site-header__wordmark">Narratipos</span>
</a>
<nav>
<a href="#para-quien">Para quién</a>
<a href="#que-es">Qué es</a>
<a href="#que-aprenderas">Qué aprenderás</a>
<a href="#certificacion">El Programa</a>
<a href="#inversion">Inversión</a>
<a href="#faq">FAQ</a>
</nav>
<button
class="nav-toggle"
type="button"
aria-label="Abrir menú"
aria-expanded="false"
aria-controls="nav-overlay"
>
<span class="nav-toggle__bars" aria-hidden="true"></span>
</button>
</div>
</header>
<div class="nav-overlay" id="nav-overlay" aria-hidden="true">
<div class="nav-overlay__inner">
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/45fb080c-07fc-4ee6-ab2b-a94a8141a940.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/49f4540b-1586-43e2-ab95-0626cc68e9b4.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/32e17f4f-a9b8-4e83-b8d3-1d8abdd4ca01.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/c0391821-f877-4eb3-8d07-f48cfd55c3c0.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/efac942b-f650-40db-80d4-49458e9049d1.webp 1920w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/4f539274-8c0b-46d2-ab70-29b8134813b5.webp 2423w" sizes="(max-width: 640px) 100vw, 2423px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/82300a32-bba9-4249-b5b7-201750453acd.png" class="nav-overlay__mark" alt="" width="2423" height="2423" />
</picture>
<ul class="nav-overlay__list">
<li><a href="#para-quien">Para quién</a></li>
<li><a href="#que-es">Qué es</a></li>
<li><a href="#que-aprenderas">Qué aprenderás</a></li>
<li><a href="#certificacion">El Programa</a></li>
<li><a href="#inversion">Inversión</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div>
</div>
<!-- HERO · estructura de bandas como la portada de la brochure -->
<section class="hero">
<div class="hero__bg" aria-hidden="true"></div>
<div class="hero__veil-azul" aria-hidden="true"></div>
<div class="hero__stars" aria-hidden="true"></div>
<div class="hero__rings" aria-hidden="true">
<svg
viewBox="-1200 -1200 2400 2400"
preserveAspectRatio="xMidYMid meet"
>
<!-- Octógono regular base · 5 capas en cascada lenta -->
<polygon
points="0,-300 212.13,-212.13 300,0 212.13,212.13 0,300 -212.13,212.13 -300,0 -212.13,-212.13"
/>
<polygon
points="0,-300 212.13,-212.13 300,0 212.13,212.13 0,300 -212.13,212.13 -300,0 -212.13,-212.13"
/>
<polygon
points="0,-300 212.13,-212.13 300,0 212.13,212.13 0,300 -212.13,212.13 -300,0 -212.13,-212.13"
/>
<polygon
points="0,-300 212.13,-212.13 300,0 212.13,212.13 0,300 -212.13,212.13 -300,0 -212.13,-212.13"
/>
<polygon
points="0,-300 212.13,-212.13 300,0 212.13,212.13 0,300 -212.13,212.13 -300,0 -212.13,-212.13"
/>
</svg>
</div>
<div class="hero__inner col">
<p class="hero__date">Undécima Edición · 2026</p>
<p class="hero__eyebrow">
La Certificación de {{custom_values.narratipos_brand_name}}
</p>
<div class="hero__brand">
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/f3f255c6-783e-4b84-885f-13a45c6a0866.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/9533eeb8-e357-4c0d-beee-42c7fef5ca3b.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/90ddf744-ad20-4c7e-b564-f556171df6dd.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/9b50a641-349a-48ef-8002-93541d411f91.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/0bce4d69-09c9-4b36-b6ad-529f840ae9da.webp 1700w" sizes="(max-width: 640px) 100vw, 1700px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/d91a601b-0e8a-4ea7-bad0-7d12cbfac790.png" alt="" class="hero__key" width="560" height="560" fetchpriority="high" decoding="async" />
</picture>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/eea552f3-9a22-48d6-84e2-0f9df63d17eb.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/6494e681-3f07-4635-85f2-72a2f5854760.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/4132b316-541d-4ff9-a760-6100364b3d88.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/83e183c7-f3c5-4baf-9308-4e7b4f703f18.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/7110eeba-9675-4a50-a487-f1ba6bcc67fe.webp 1616w" sizes="(max-width: 640px) 100vw, 1616px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/77ff4fe3-8dc0-44aa-9eb6-fafa60f1ab34.png" alt="Narratipos" class="hero__wordmark" width="720" height="160" decoding="async" />
</picture>
</div>
<p class="hero__meta">
Plazas limitadas <b>·</b> Acceso por solicitud
</p>
<div class="cta-row">
<a
href="{{custom_values.narratipos_request_access_url}}"
class="cta cta--terra"
>Solicitar acceso
<i class="icon icon--arrow" aria-hidden="true"></i>
</a>
<a
href="{{custom_values.narratipos_brochure_url}}"
class="cta cta--ghost"
download
target="_blank"
rel="noopener noreferrer"
>Ver el Brochure</a
>
</div>
</div>
</section>
<!-- PARA QUIÉN -->
<section id="para-quien" style="background: #000">
<div class="col">
<div class="editorial fade-up">
<div>
<p class="eyebrow">Para quién es esta</p>
<h2 class="h-title silver">Certificación</h2>
<div class="rule rule--left">
<span class="l"></span><span class="d"></span>
</div>
<p
class="lede"
style="
font-style: italic;
color: var(--accent);
font-family: var(--serif);
margin-bottom: 1.6rem;
"
>
Personas singulares<br class="br-mobile" />
con talentos únicos.
</p>
<p>
Se guían por la intuición pero no pierden el contacto con lo
terrenal. Honran el dinero como una de las herramientas más
poderosas para crecer y transformar.
</p>
<p>
Si en su día no fueron comprendidas como ovejas negras, ahora son
referencias que marcan tendencias de venta y comunicación.
</p>
<p>
Comprenden el valor de la estrategia y de cuidar sus procesos de
una forma ética, trabajando con personas que están realmente
preparadas.
</p>
<p>
Han pasado por una variedad de mentores, formaciones y retiros, y
ahora buscan entrar en su propio universo.
</p>
<p class="editorial__cierre">
Están dispuestos a <em>ser patrimonio</em>.
</p>
</div>
<div class="editorial__photo">
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/5af07130-a014-4b54-9833-dc185e66cd9f.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/165e5d8e-c02c-4e32-9357-7671d4c65f3c.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/c160987c-18c4-45e1-b34f-07a7b5455899.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/9ab15be4-cdfa-4c3d-8f14-4108d24ad368.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/1c49c6af-33d7-4c88-bd45-4b0e5923b5d7.webp 1600w" sizes="(max-width: 640px) 100vw, 1600px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/a261f67c-3bb9-4fe0-8992-ee9f092b4a9c.jpg" alt="" loading="lazy" decoding="async" />
</picture>
<span class="editorial__photo-credit">
Fotografía de Javier Bragado © 2026
</span>
</div>
</div>
</div>
</section>
<!-- QUÉ ES -->
<section id="que-es" class="blend" style="--from: #000; --to: var(--wine)">
<div class="col">
<div class="editorial fade-up">
<div class="editorial__photo">
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/a532d99f-e81b-4fba-b378-02c9aa60e242.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/69e3bcb4-8465-4974-bdd6-3fd78afc7b38.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/d477e477-baee-488f-b14c-ed878d12a80d.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/1c79b456-4b33-4bbb-a81b-5548dc0c4495.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/0df328c5-470f-400c-a505-237d2a42b4e9.webp 1600w" sizes="(max-width: 640px) 100vw, 1600px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/563cb40f-c1cb-4072-a982-770f4f10336d.jpg" alt="" loading="lazy" decoding="async" />
</picture>
<span class="editorial__photo-credit">
Fotografía de Javier Bragado © 2026
</span>
</div>
<div>
<p class="eyebrow">Qué es</p>
<h2 class="h-title silver">
Narratipos<sup
style="
font-size: 0.45em;
-webkit-text-fill-color: var(--paper-2);
"
>®</sup
>
</h2>
<div class="rule rule--left">
<span class="l"></span><span class="d"></span>
</div>
<p
class="lede"
style="
font-style: italic;
color: var(--accent);
font-family: var(--serif);
margin-bottom: 1.6rem;
"
>
Una tecnología empírica que revela la arquitectura comunicativa
según tu identidad y tus patrones psicológicos.
</p>
<p>
En un mundo donde todos forman parte de un rebaño, saber encontrar
tu propia narrativa personal te hará realmente visible.
</p>
<p>
Imagina que pudieras sintonizar el dial de una radio en una
emisora en la que el mundo no pudiera dejar de escucharte. Tu
propia emisora; <em>tu narratipo</em>.
</p>
<p>
Emitir en tu propia frecuencia comunicativa te permite llegar a la
audiencia adecuada e incrementar notablemente tu influencia y
magnetismo.
</p>
<p class="editorial__cierre editorial__cierre--serif">
Conocer cuál de los 8 narratipos eres puede definir tu éxito
a nivel comunicativo a partir de ahora.
</p>
</div>
</div>
</div>
</section>
<!-- QUÉ APRENDERÁS -->
<section
id="que-aprenderas"
class="aprenderas blend"
style="--from: var(--wine); --to: var(--wine-2)"
>
<div class="col-narrow fade-up">
<div class="center" style="margin-bottom: clamp(48px, 6vw, 84px)">
<p class="eyebrow">Qué aprenderás</p>
<div class="rule">
<span class="l"></span><span class="d"></span
><span class="l"></span>
</div>
</div>
<div class="aprenderas__list">
<article class="aprende">
<div class="aprende__num">i</div>
<h3 class="aprende__title">Contenidos en Redes</h3>
<p class="aprende__lead">
Contenidos con estrategia, naturalidad y diferenciación,
comprendidos única y exclusivamente por las personas que quieres
atraer conscientemente.
</p>
<p class="aprende__note">
Eliminando de la ecuación las cuentas falsas y el sentirte un
muñeco familiar.
</p>
</article>
<article class="aprende">
<div class="aprende__num">ii</div>
<h3 class="aprende__title">Narrativa como Maestro</h3>
<p class="aprende__lead">
Tus propias experiencias, el lenguaje metafórico y la capacidad de
comprender el alma de tu cliente boutique.
</p>
<p class="aprende__note">
No te hará falta llegar a miles de personas, sino a clientes
boutique que te percibirán como una pieza de colección con la que
desean trabajar.
</p>
</article>
<article class="aprende">
<div class="aprende__num">iii</div>
<h3 class="aprende__title">Conocimientos Prácticos</h3>
<p class="aprende__lead">
Más herméticos, esotéricos e impactantes, que mueven los hilos de
la mente colectiva.
</p>
<p class="aprende__note">
Dejarás de sentirte estancado para moverte en un ascensor de ida y
vuelta entre la Supraconciencia y el plano físico.
</p>
</article>
</div>
</div>
</section>
<!-- CERTIFICACIÓN · 8 MÓDULOS -->
<section
id="certificacion"
class="certificacion amb-stars amb-glow blend"
style="--from: var(--wine-2); --to: var(--navy)"
>
<div class="col fade-up">
<div class="center" style="margin-bottom: clamp(48px, 6vw, 84px)">
<p class="eyebrow">El programa</p>
<div class="rule">
<span class="l"></span><span class="d"></span
><span class="l"></span>
</div>
</div>
<div class="modulos">
<article class="modulo" style="--c: var(--narratipo-sensitivo)">
<div class="modulo__band"></div>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/3ae390ca-30bd-4176-a2d1-887f824c6f9f.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/d606b044-cd94-4fdf-9ac0-c8edd328b33f.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/7012d688-b1fc-4690-99a0-47e453746a96.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/5f2ff52f-c84f-4208-b02d-ad993d2c36d8.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/2fa31f81-1f23-4beb-baae-8d74165fd626.webp 1920w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/e86b74c5-ae61-4046-a8d4-31cecd1555f3.webp 2373w" sizes="(max-width: 640px) 100vw, 2373px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/e422a1a5-abbc-477d-b1c0-73a819b7fed4.png" class="modulo__mockup" alt="Visual del Módulo 1" loading="lazy" decoding="async" />
</picture>
<div class="modulo__num">Módulo 1</div>
<h3 class="modulo__title">Mindset Narrativo</h3>
<div class="modulo__sub">
<span>Cerco de Creencias</span><span>Heridas Latentes</span
><span>Talentos Ocultos</span>
</div>
<p class="modulo__desc">
Profundizamos en los entresijos de tu narrativa interna para
detectar cada uno de los mimbres mentales que forjan tu identidad
única.
</p>
</article>
<article class="modulo" style="--c: var(--narratipo-visionario)">
<div class="modulo__band"></div>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/0cd23a15-bcbe-4dc8-a0c1-8f6d87aaf80f.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/4bd4e7be-6f70-4039-a68e-088f874a61bd.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/17dcb6a1-8d25-410c-b0f0-e577e158d78c.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/430c46c0-f678-40ab-829e-3c25e2d836ed.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/70ef329f-4014-4fa3-bb79-6c92fab979dc.webp 1920w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/db84620b-8f9b-46e1-92dc-90337080d180.webp 2372w" sizes="(max-width: 640px) 100vw, 2372px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/e41dffd8-1821-4214-97d9-5c1e92b892f1.png" class="modulo__mockup" alt="Visual del Módulo 2" loading="lazy" decoding="async" />
</picture>
<div class="modulo__num">Módulo 2</div>
<h3 class="modulo__title">Macro Narrativas</h3>
<div class="modulo__sub">
<span>Psicología de Masas</span
><span>Psicología de las Minorías</span
><span>Crear una Nueva Tendencia</span>
</div>
<p class="modulo__desc">
El arte de dominar la narrativa por factores sociales y culturales
que impregnan todos los rincones de la mente colectiva. Saber
limpiar y decorar esos espacios te permite posicionarte como
tendencia que todos escuchan y siguen.
</p>
</article>
<article class="modulo" style="--c: var(--narratipo-motivador)">
<div class="modulo__band"></div>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/7066bdd8-e958-4e85-b52b-69e25da1fc3b.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/0e4c68fc-0ee3-466f-b182-72d86e8f12a0.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/d059d508-fdf0-4e17-9141-7d6a278a669c.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/bfce125b-1ced-4497-99b8-c7a49f79144e.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/851361a4-f691-4ccf-b6b1-5bb4b6d987a4.webp 1920w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/495754bd-9e71-4c3b-8e9b-3ca62f679005.webp 2373w" sizes="(max-width: 640px) 100vw, 2373px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/c7a37c25-85f3-4194-84ae-3b86fee7b6c2.png" class="modulo__mockup" alt="Visual del Módulo 3" loading="lazy" decoding="async" />
</picture>
<div class="modulo__num">Módulo 3</div>
<h3 class="modulo__title">Lenguaje Metafórico</h3>
<div class="modulo__sub">
<span>Simbología Arquetípica</span><span>Numerología</span
><span>Geometría Sagrada</span>
</div>
<p class="modulo__desc">
La zona más hermética de la Certificación abre sus puertas a un
conocimiento ancestral con el que comenzarás a dominar la parte
menos consciente —y más poderosa— de la narrativa a la hora de
conectar con tus audiencias.
</p>
</article>
<article class="modulo" style="--c: var(--narratipo-investigador)">
<div class="modulo__band"></div>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/39dda6ed-3971-4f04-bb7b-04149878dded.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/b6189274-7eac-446a-9b8f-5a9adf0e88ef.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/50cb3ecb-6941-498c-890b-a43281825d7b.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/926b7493-e91a-4c42-81e3-27f476891f64.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/ac103b66-0277-4b43-9b7f-26742d7aac62.webp 1920w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/332ef23a-b8a7-4e72-a124-124ebf62fedd.webp 2372w" sizes="(max-width: 640px) 100vw, 2372px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/0649274e-926f-4d9f-b8a9-c2985ac37287.png" class="modulo__mockup" alt="Visual del Módulo 4" loading="lazy" decoding="async" />
</picture>
<div class="modulo__num">Módulo 4</div>
<h3 class="modulo__title">El Arte de Narrar Historias</h3>
<div class="modulo__sub">
<span>Storytelling Moderno</span
><span>Storyselling de Alto Valor</span
><span>Tramas, Personajes y Finales</span>
</div>
<p class="modulo__desc">
Dicen que si no hay conflicto no hay historia. Más allá de eso,
existen capas invisibles donde se construyen tramas de impacto: la
curiosidad como motor magnético que atrae constantemente a nuevos
clientes.
</p>
</article>
<article class="modulo" style="--c: var(--narratipo-previsor)">
<div class="modulo__band"></div>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/1f225494-b393-4e49-ac35-0d183a3e86b0.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/38ed1407-75e0-4b7c-bf38-cf04aa2f94d7.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/359bf661-1f35-46ba-bdb4-310afea014fb.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/0a11345d-c1fa-48bc-a575-e308676c6c7b.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/dfebe2ed-0eb9-4002-b705-bb0f5e028074.webp 1920w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/6d6e5bfd-a2f7-4ca9-9f67-1263999cfde8.webp 2373w" sizes="(max-width: 640px) 100vw, 2373px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/0043425d-5517-41da-b373-a6129de68dd5.png" class="modulo__mockup" alt="Visual del Módulo 5" loading="lazy" decoding="async" />
</picture>
<div class="modulo__num">Módulo 5</div>
<h3 class="modulo__title">Marca Personal Única</h3>
<div class="modulo__sub">
<span>Identidad Visual</span><span>Colorimetría Simbólica</span
><span>Narrativa de Marca</span>
</div>
<p class="modulo__desc">
Aprende a dominar las primeras impresiones dejando una huella
imborrable en la mente de las personas.
</p>
</article>
<article class="modulo" style="--c: var(--narratipo-singular)">
<div class="modulo__band"></div>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/380f2fb7-bc4e-48aa-860a-402189050e10.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/6871a2cf-a17d-45ae-9222-40282a409935.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/9d983fd9-ce4d-480a-b840-78233e260ee7.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/74d0b289-04b5-4e0b-9d42-188fbf087500.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/28feefdd-f1da-4b72-bb13-b105f848d516.webp 1920w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/73e371e6-3ef5-402c-aea8-9f5faf70c428.webp 2372w" sizes="(max-width: 640px) 100vw, 2372px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/8c9b2023-6723-4c54-bc81-de6e53925779.png" class="modulo__mockup" alt="Visual del Módulo 6" loading="lazy" decoding="async" />
</picture>
<div class="modulo__num">Módulo 6</div>
<h3 class="modulo__title">Curiosidad & Magnetismo</h3>
<div class="modulo__sub">
<span>Sesgos Cognitivos</span><span>Disparadores de Arousal</span
><span>Condicionamiento y Gamificación</span>
</div>
<p class="modulo__desc">
Crear un mensaje único, sencillo y eficaz es la base de todo
experto: diseñar narrativas de alta influencia.
</p>
</article>
<article class="modulo" style="--c: var(--narratipo-transformador)">
<div class="modulo__band"></div>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/323bd107-4326-4cbd-b3ca-26e021e7ae43.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/98c8421f-05cf-4aed-b33a-e0975ded8dea.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/f4dc4d42-bd49-4766-92f3-5aef466a01df.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/bb0230f2-9cc0-40a7-a1cd-637d8c98d489.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/389c07c4-ceca-4e9c-9a95-3857f0e3cf3d.webp 1920w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/3ce1369d-0007-4f45-8771-7180dd88ccc7.webp 2372w" sizes="(max-width: 640px) 100vw, 2372px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/ba618bfb-7a8e-4d8e-8004-d0e3fd943a85.png" class="modulo__mockup" alt="Visual del Módulo 7" loading="lazy" decoding="async" />
</picture>
<div class="modulo__num">Módulo 7</div>
<h3 class="modulo__title">Crea tu Tribu</h3>
<div class="modulo__sub">
<span>Mimbres Mentales Tribales</span
><span>Causa y Propósito Colectivo</span
><span>Diseño de Cultos</span>
</div>
<p class="modulo__desc">
Todo líder es capaz de diseñar contextos en los que las personas
sienten una identidad social particular. Aprende a pasar de tener
seguidores a construir una tribu, una comunidad única y un
movimiento imparable de personas fieles a tus principios.
</p>
</article>
<article class="modulo" style="--c: var(--narratipo-conector)">
<div class="modulo__band"></div>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/30134edd-1c25-4728-9632-28331c2cb2f5.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/5f9a5824-cda3-4fed-99d4-739fc6d5bbfd.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/a665ec2b-dc4f-4c4d-ba62-8da43fa47e47.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/e3eed6a7-7d81-4e49-b467-1357ac2a6232.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/b6a84986-4fe7-477d-a909-60c2b4c03a73.webp 1920w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/3317398c-2e7c-4e9a-9018-1f49b68bdf51.webp 2372w" sizes="(max-width: 640px) 100vw, 2372px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/c63e2453-3c73-4744-8271-8b8b6492f3a5.png" class="modulo__mockup" alt="Visual del Módulo 8" loading="lazy" decoding="async" />
</picture>
<div class="modulo__num">Módulo 8</div>
<h3 class="modulo__title">Telepatía & Supraconsciencia</h3>
<div class="modulo__sub">
<span>Visión Extraocular</span><span>Premonición</span
><span>Manifestación</span>
</div>
<p class="modulo__desc">
Entramos en la zona prohibida de la Certificación, solo apta para
alumnos avanzados en narrativa que desean acceder a otras
dimensiones comunicativas.
</p>
</article>
</div>
</div>
</section>
<!-- INVERSIÓN (precio primero, bonos después) -->
<section
id="inversion"
class="inversion amb-stars amb-glow"
style="
background: linear-gradient(
180deg,
var(--navy) 0%,
var(--navy) 55%,
#000 92%,
#000 100%
);
"
>
<div class="col-narrow fade-up">
<div class="center" style="margin-bottom: clamp(40px, 5vw, 64px)">
<p class="eyebrow">Inversión</p>
<div class="rule">
<span class="l"></span><span class="d"></span
><span class="l"></span>
</div>
</div>
<div class="precio-card">
<ul class="precio__breakdown">
<li><span>Programa</span><span>8.000 €</span></li>
<li><span>Viral</span><span>990 €</span></li>
<li><span>Experience</span><span>990 €</span></li>
<li><span>Selling</span><span>1.190 €</span></li>
<li><span>Pocket</span><span>500 €</span></li>
<li>
<span>Artefactos Psicológicos</span><span>1.500 €</span>
</li>
<li><span>Consultoría Privada</span><span>2.400 €</span></li>
<li>
<span>Todo 2026 + Comunidad</span><span>16.000 €</span>
</li>
</ul>
<div class="precio__headline">
<span class="precio__strike">31.570 €</span>
</div>
<div class="precio__split">
<div class="precio__col">
<div class="precio__amount">3.960 €</div>
<div class="precio__cap">Pago único</div>
</div>
<div class="precio__divider" aria-hidden="true"></div>
<div class="precio__col">
<div class="precio__amount">369 €</div>
<div class="precio__cap">12 cuotas</div>
</div>
</div>
<span class="precio__iva">IVA incluido · Garantía 15 días</span>
<div class="cta-row">
<a
href="{{custom_values.narratipos_request_access_url}}"
class="cta cta--terra cta--hero-anim"
>Solicitar acceso
<i class="icon icon--arrow" aria-hidden="true"></i>
</a>
</div>
<div
class="precio__providers"
aria-label="Métodos de pago disponibles"
>
<img
src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/d367dcd5-8002-4860-a50f-3e6a186f10ee.svg"
alt="Visa"
/>
<img
src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/76b27c1d-d4eb-4afe-a5a2-3a379121a4de.svg"
alt="Mastercard"
/>
<img
src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/8f7d13bc-8d4c-479e-8f9d-a4c78d3fd761.svg"
alt="American Express"
/>
<span class="precio__providers-sep" aria-hidden="true"></span>
<img
src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/cf159d3d-86ad-42de-afe9-ce1548aa5435.svg"
alt="seQura"
/>
</div>
</div>
</div>
<div class="col fade-up" style="margin-top: 4rem">
<div class="center">
<p class="eyebrow">Bonos de la Edición</p>
<div class="rule">
<span class="l"></span><span class="d"></span
><span class="l"></span>
</div>
</div>
<div class="bonos__grid">
<article
class="bono"
tabindex="0"
role="button"
aria-haspopup="dialog"
data-bono-img="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/c3bf4d13-eb65-4054-8f30-e80fec2066a0.jpg"
data-bono-label="Bono 1"
data-bono-name="Viral"
>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/d7e9ff87-52ca-46e8-8a6e-c9094580d18a.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/f0ffb7f2-f0fa-4d35-b34f-82c1e35f975a.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/72129664-3003-4bae-9a03-3d46574c1a83.webp 900w" sizes="(max-width: 640px) 100vw, 900px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/c3bf4d13-eb65-4054-8f30-e80fec2066a0.jpg" class="bono__visual" loading="lazy" decoding="async" alt="Bono 1 · Viral" />
</picture>
<div class="bono__caption">
<div class="bono__name">Viral</div>
<span class="bono__hint">Ver detalle</span>
</div>
</article>
<article
class="bono"
tabindex="0"
role="button"
aria-haspopup="dialog"
data-bono-img="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/dae66ed2-8f7b-492c-9b79-eb91c7f8d849.jpg"
data-bono-label="Bono 2"
data-bono-name="Experience"
>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/84b9c515-49ec-4719-9657-fc1a8555c905.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/2925110a-d245-4436-8ae6-f0e3b6575b40.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/9371ddee-378b-4bda-8088-b3e535e97894.webp 900w" sizes="(max-width: 640px) 100vw, 900px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/dae66ed2-8f7b-492c-9b79-eb91c7f8d849.jpg" class="bono__visual" loading="lazy" decoding="async" alt="Bono 2 · Experience" />
</picture>
<div class="bono__caption">
<div class="bono__name">Experience</div>
<span class="bono__hint">Ver detalle</span>
</div>
</article>
<article
class="bono"
tabindex="0"
role="button"
aria-haspopup="dialog"
data-bono-img="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/11c5c301-a48d-4b71-97d9-e84662c996c6.jpg"
data-bono-label="Bono 3"
data-bono-name="Selling"
>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/8cadb1c0-6fc1-4ce8-83b4-46222d5c3dad.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/34490af2-b428-4359-addd-d5cf904ea572.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/3343509c-bc7b-4981-b484-9495988e278e.webp 900w" sizes="(max-width: 640px) 100vw, 900px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/11c5c301-a48d-4b71-97d9-e84662c996c6.jpg" class="bono__visual" loading="lazy" decoding="async" alt="Bono 3 · Selling" />
</picture>
<div class="bono__caption">
<div class="bono__name">Selling</div>
<span class="bono__hint">Ver detalle</span>
</div>
</article>
<article
class="bono"
tabindex="0"
role="button"
aria-haspopup="dialog"
data-bono-img="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/2af8344a-ce85-4073-a1f7-56987ebe677b.jpg"
data-bono-label="Bono 4"
data-bono-name="Pocket"
>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/01929414-041b-4973-8a93-b1c546482af8.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/d8ef8ce0-194d-48e4-acc3-1850e139d18c.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/3f0f0b5d-3992-4215-8a6e-1fd566335530.webp 900w" sizes="(max-width: 640px) 100vw, 900px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/2af8344a-ce85-4073-a1f7-56987ebe677b.jpg" class="bono__visual" loading="lazy" decoding="async" alt="Bono 4 · Pocket" />
</picture>
<div class="bono__caption">
<div class="bono__name">Pocket</div>
<span class="bono__hint">Ver detalle</span>
</div>
</article>
<article
class="bono"
tabindex="0"
role="button"
aria-haspopup="dialog"
data-bono-img="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/3cb5ebe2-b72e-4cb9-8b8a-97b24539e160.jpg"
data-bono-label="Bono 5"
data-bono-name="Artefactos Psicológicos"
>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/f58b67fa-3a14-43aa-a0dc-e5da9ac79fb6.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/35856ad7-bce8-4c72-a3e3-064056896885.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/0ab756af-27f3-4b87-ada9-12afc74eb6fa.webp 900w" sizes="(max-width: 640px) 100vw, 900px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/3cb5ebe2-b72e-4cb9-8b8a-97b24539e160.jpg" class="bono__visual" loading="lazy" decoding="async" alt="Bono 5 · Artefactos Psicológicos" />
</picture>
<div class="bono__caption">
<div class="bono__name">Artefactos Psicológicos</div>
<span class="bono__hint">Ver detalle</span>
</div>
</article>
<article
class="bono"
tabindex="0"
role="button"
aria-haspopup="dialog"
data-bono-img="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/f6051cb5-afc5-4c9a-bdc0-804eab65ba86.jpg"
data-bono-label="Bono 6"
data-bono-name="Consultoría Privada"
>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/6e8f6e9c-4899-4c54-8d5b-34458a376f16.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/c36d6d49-c6b6-477a-9e05-4f7660b29335.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/65efc1d4-5c86-46d9-aefb-fdc610b26db6.webp 900w" sizes="(max-width: 640px) 100vw, 900px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/f6051cb5-afc5-4c9a-bdc0-804eab65ba86.jpg" class="bono__visual" loading="lazy" decoding="async" alt="Bono 6 · Consultoría Privada" />
</picture>
<div class="bono__caption">
<div class="bono__name">Consultoría privada</div>
<span class="bono__hint">Ver detalle</span>
</div>
</article>
<article
class="bono"
tabindex="0"
role="button"
aria-haspopup="dialog"
data-bono-img="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/8be31f81-2ea2-4133-9a9f-3e418b70f3fe.jpg"
data-bono-label="Bono 7"
data-bono-name="Encuentro en Madrid"
>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/e8dc5289-1181-474b-9fca-92597e51e17c.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/9dde00a1-f36e-4e76-b42f-69c88a315d91.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/418b6e68-d116-4ba7-967b-b4bae19fdebf.webp 900w" sizes="(max-width: 640px) 100vw, 900px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/8be31f81-2ea2-4133-9a9f-3e418b70f3fe.jpg" class="bono__visual" loading="lazy" decoding="async" alt="Bono 7 · Encuentro en Madrid" />
</picture>
<div class="bono__caption">
<div class="bono__name">Encuentro en Madrid</div>
<span class="bono__hint">Ver detalle</span>
</div>
</article>
<article
class="bono"
tabindex="0"
role="button"
aria-haspopup="dialog"
data-bono-img="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/d0fac111-10ec-42b2-915a-424171501044.jpg"
data-bono-label="Bono 8"
data-bono-name="Estratego Royal"
>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/016207a1-56cb-493f-bfc1-c1a40fe2ba3b.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/c9c059e2-c133-4f68-a111-88f5619e1384.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/89f402f1-f328-4e95-a674-900ece764b59.webp 900w" sizes="(max-width: 640px) 100vw, 900px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/d0fac111-10ec-42b2-915a-424171501044.jpg" class="bono__visual" loading="lazy" decoding="async" alt="Bono 8 · Estratego Royal" />
</picture>
<div class="bono__caption">
<div class="bono__name bono__name--tight">Estratego Royal</div>
<span class="bono__hint">Ver detalle</span>
</div>
</article>
</div>
</div>
</section>
<!-- CIERRE -->
<section id="acceso" class="cierre">
<div class="col-narrow fade-up">
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/45fb080c-07fc-4ee6-ab2b-a94a8141a940.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/49f4540b-1586-43e2-ab95-0626cc68e9b4.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/32e17f4f-a9b8-4e83-b8d3-1d8abdd4ca01.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/c0391821-f877-4eb3-8d07-f48cfd55c3c0.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/efac942b-f650-40db-80d4-49458e9049d1.webp 1920w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/4f539274-8c0b-46d2-ab70-29b8134813b5.webp 2423w" sizes="(max-width: 640px) 100vw, 2423px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/82300a32-bba9-4249-b5b7-201750453acd.png" alt="" class="cierre__symbol" width="2423" height="2423" />
</picture>
<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 class="cta-row">
<a
href="{{custom_values.narratipos_request_access_url}}"
class="cta cta--terra cta--hero-anim"
>Solicitar acceso
<i class="icon icon--arrow" aria-hidden="true"></i>
</a>
</div>
<p
style="
margin-top: 2rem;
font-size: 0.74rem;
letter-spacing: 0.3em;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
"
>
Plazas limitadas · Acceso por solicitud
</p>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="faq blend" style="--from: #000; --to: #000">
<div class="col-narrow fade-up">
<div class="center" style="margin-bottom: clamp(40px, 5vw, 64px)">
<p class="eyebrow">Preguntas honestas</p>
<div class="rule">
<span class="l"></span><span class="d"></span
><span class="l"></span>
</div>
</div>
<div class="faq__list">
<details class="faq__item">
<summary>¿En qué formato se imparte?</summary>
<div class="faq__panel">
<div class="faq__answer">
La Certificación se desarrolla durante el primer trimestre del
año mediante seis encuentros especiales en directo de dos horas
cada uno, en grupo reducido y privado, complementados con el
contenido trimestral 2026 y los bonos correspondientes.
</div>
</div>
</details>
<details class="faq__item">
<summary>¿Cómo se obtiene la certificación oficial?</summary>
<div class="faq__panel">
<div class="faq__answer">
Completando los 8 módulos del programa y participando en
los Momentos Narratipos del proceso de inmersión.
</div>
</div>
</details>
<details class="faq__item">
<summary>¿Para quién no es esta Certificación?</summary>
<div class="faq__panel">
<div class="faq__answer">
No es una formación de iniciación ni una academia masiva. Se
dirige a profesionales y emprendedores conscientes y reflexivos,
alfabetizados en su propio oficio.
</div>
</div>
</details>
<details class="faq__item">
<summary>¿Hay garantía?</summary>
<div class="faq__panel">
<div class="faq__answer">
Sí. Garantía de 15 días de devolución desde la fecha de
acceso.
</div>
</div>
</details>
<details class="faq__item">
<summary>¿Cuáles son las facilidades de pago?</summary>
<div class="faq__panel">
<div class="faq__answer">
Pago único de 3.960 € (IVA incluido) o cuotas desde
369 €/mes vía seQura.
</div>
</div>
</details>
<details class="faq__item">
<summary>¿Cuándo recibo los bonos?</summary>
<div class="faq__panel">
<div class="faq__answer">
Pocket y Artefactos Psicológicos son de acceso inmediato. El
resto se entregan según el calendario y la tarifa contratada.
Los bonos del lanzamiento (Artefactos) y los de tarifa completa
(Encuentro Madrid) tienen condiciones especiales detalladas en
el proceso de admisión.
</div>
</div>
</details>
</div>
</div>
</section>
<!-- AUTOR · cierre patrimonial (última sección) -->
<section
id="autor"
class="autor amb-stars"
style="
background: linear-gradient(
180deg,
#000 0%,
var(--wine) 28%,
var(--wine) 72%,
#000 100%
);
"
>
<div class="col">
<div class="editorial fade-up">
<div class="autor__body">
<p class="eyebrow">Detrás del modelo</p>
<h2 class="h-title silver" style="margin-top: 1rem">
David <span class="terra-tx">Sobrino</span>
</h2>
<div class="rule rule--left">
<span class="l"></span><span class="d"></span>
</div>
<p>
Experto en Narrativa y Diseño de Estrategias de Comunicación para
marcas y negocios que quieren diferenciarse y vender más.
Ideólogo, escritor e investigador del comportamiento humano
durante más de 20 años.
</p>
<p>
Fundador de <em>La Boutique de Mentores</em>, una empresa
destinada a seleccionar, desarrollar y formar a los mentores con
mayor talento de habla hispana.
</p>
<p>
Papá de 2+1 y precursor del
<em>Ser Humano como Patrimonio de la Humanidad</em>, trabaja cada
día para que las nuevas generaciones no sean víctimas de un
sistema educativo que pretende condicionar a las personas para ser
el mejor o el primero.
</p>
<p>
Autor del libro
<a
href="{{custom_values.narratipos_book_amazon_url}}"
target="_blank"
rel="noopener noreferrer"
class="link-inline"
><strong
><em
>«Narratipos: los 8 patrones comunicativos para desplegar
todo tu potencial e influencia»</em
></strong
></a
>, lanzado en febrero de 2026 con Penguin Random
House / Grijalbo.
</p>
<p style="color: var(--paper-2)">
Dirige la
<strong style="color: var(--white)"
>Certificación de
{{custom_values.narratipos_brand_name}}</strong
>, por la que ya han pasado más de 150 referentes del sector
de la formación, el marketing y el desarrollo humano. Creador del
Modelo de {{custom_values.narratipos_brand_name}}, una tecnología
de la comunicación que aplica la Psicoinfluencia para vender de
una forma natural, auténtica y diferente.
</p>
</div>
<div class="editorial__photo">
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/a5070f4d-b1b7-4c55-bfed-45e3a730a094.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/51761613-5ca5-4b5c-8b5e-89180a431bb5.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/b98dd8af-62d1-4fcf-82f2-5d290ca4c7af.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/a48c61da-4625-4fea-bf0f-c7b7a8210f4b.webp 1080w" sizes="(max-width: 640px) 100vw, 1080px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/91851b6e-723b-434d-9fae-a8714a274bf7.jpg" alt="David Sobrino" loading="lazy" decoding="async" />
</picture>
<span class="editorial__photo-credit">
Fotografía de Javier Bragado © 2026
</span>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="site-footer">
<div class="site-footer__stars" aria-hidden="true"></div>
<div class="col site-footer__top">
<a
href="https://www.laboutiquedementores.es"
target="_blank"
rel="noopener noreferrer"
class="site-footer__brand-mark"
aria-label="La Boutique de Mentores"
>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/f77bb516-d6f7-428b-94aa-f59d1089b274.webp 240w" sizes="(max-width: 640px) 100vw, 240px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/99515b9b-5a6f-441a-bf67-f942d6188ffa.png" alt="La Boutique de Mentores" loading="lazy" decoding="async" />
</picture>
</a>
<a
href="https://www.davidsobrino.es"
target="_blank"
rel="noopener noreferrer"
aria-label="David Sobrino"
>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/72a56c07-8435-4729-bfed-ca63a6c4de7b.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/700c2f79-294d-4dec-99e9-08fc56fc81ff.webp 486w" sizes="(max-width: 640px) 100vw, 486px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/e49f6f6b-2837-43a3-8a04-84dff29b0c50.png" alt="Firma de David Sobrino" class="site-footer__signature" loading="lazy" decoding="async" />
</picture>
</a>
</div>
<div class="col site-footer__credit-row">
<a
class="site-footer__credit"
href="https://www.innki.tech"
target="_blank"
rel="noopener noreferrer"
aria-label="Diseño y Desarrollo por Innki Tech"
>
<span class="site-footer__credit-label">Diseño & Desarrollo</span>
<img
class="site-footer__credit-logo"
src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/d22cd6e9-ba85-4520-927d-f78ad7742154.svg"
alt="Innki Tech"
loading="lazy"
decoding="async"
/>
</a>
</div>
<div class="col site-footer__center">
<div class="site-footer__legal">
<span
>Todos los derechos reservados<span class="hide-mobile">
· </span
><br class="br-mobile" />La Boutique de Mentores SL ·
{{now.year}}</span
>
<span>
<a href="{{custom_values.narratipos_privacy_policy_url}}"
>Política de privacidad</a
>
·
<a href="{{custom_values.narratipos_cookies_policy_url}}"
>Política de cookies</a
>
·
<a href="{{custom_values.narratipos_legal_policy_url}}"
>Aviso legal</a
>
·
<a href="{{custom_values.narratipos_terms_and_conditions_url}}"
>Términos y condiciones</a
>
</span>
</div>
</div>
</footer>
<!-- VOLVER AL INICIO -->
<button
type="button"
class="back-to-top"
id="back-to-top"
aria-label="Volver arriba"
>
<i class="icon icon--arrow-up" aria-hidden="true"></i>
</button>
<!-- Modal único reutilizable para los bonos · fuera de cualquier stacking context -->
<div
class="bono-modal"
id="bono-modal"
role="dialog"
aria-modal="true"
aria-labelledby="bono-modal-caption"
aria-hidden="true"
>
<div class="bono-modal__dialog">
<button class="bono-modal__close" type="button" aria-label="Cerrar">
<i class="icon icon--close" aria-hidden="true"></i>
</button>
<img class="bono-modal__image" src="" alt="" />
<div class="bono-modal__caption" id="bono-modal-caption">
<b></b> · <span></span>
</div>
</div>
</div>
</body>
</html>
Paste into the GHL page's Custom CSS field.
/* ===== brand | design system ===== */
/* =========================================================
NARRATIPOS | LANDING
---------------------------------------------------------
Main stylesheet.
File outline:
| Variables and reset
| Typography and base layout
| Icons
| CTA system
| Header and navigation
| Hero
| Sections (audience, what it is, modules, pricing, ...)
| FAQ, footer and utilities
| Media queries and motion
========================================================= */
:root {
/* --- Core: ink, paper and rules --- */
--ink: #0a0a0c;
--ink-2: #13131a;
--ink-3: #1a1a22;
--navy: #1f4d7a;
--navy-deep: #163655;
--navy-mist: #2c5e8c;
--line: rgba(255, 255, 255, 0.08);
--line-strong: rgba(255, 255, 255, 0.18);
--paper: #efeae0;
--paper-2: #c9c2b3;
--mute: #7b7568;
--white: #ffffff;
/* --- Accents: terra, blue, book purple and wine --- */
--terra: #d4845f;
--terra-deep: #b86a48;
--sky: #9dc4e0;
--azul: #7b9bbe;
--azul-deep: #5a7ba0;
--azul-soft: rgba(123, 155, 190, 0.16);
--morado-libro: #4f032a;
--morado-libro-deep: #2e021a;
--accent: var(--terra);
--accent-deep: var(--terra-deep);
--accent-soft: rgba(212, 132, 95, 0.18);
--wine: #1a0508;
--wine-2: #240810;
--wine-3: #330b16;
--wine-line: rgba(212, 132, 95, 0.16);
/* --- Narratipos: color identificativo de cada uno --- */
--narratipo-visionario: #163655;
--narratipo-motivador: #2a6fb5;
--narratipo-conector: #2a8fce;
--narratipo-transformador: #5ba85a;
--narratipo-investigador: #e8b23a;
--narratipo-previsor: #e89a2a;
--narratipo-singular: #c9102c;
--narratipo-sensitivo: #8c2d5e;
/* --- Fonts --- */
--serif: "Cinzel", "Trajan Pro", "EB Garamond", Georgia, serif;
--sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--script: "Allura", "Great Vibes", cursive;
/* --- Grid system --- */
--col: min(1180px, 92vw);
--col-narrow: min(820px, 92vw);
}
/* =========================================================
RESET MÍNIMO
========================================================= */
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
background: var(--ink);
}
body {
background: var(--ink);
color: var(--paper);
font-family: var(--sans);
font-weight: 300;
font-size: 17px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body.anim-paused *,
body.anim-paused *::before,
body.anim-paused *::after {
animation-play-state: paused !important;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
/* =========================================================
TIPOGRAFÍA
Utility classes for font, size and hierarchy.
========================================================= */
.serif {
font-family: var(--serif);
font-weight: 400;
}
.script {
font-family: var(--script);
font-weight: 400;
}
.h-display {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2.6rem, 7vw, 5.4rem);
line-height: 1.05;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--white);
margin: 0;
}
.h-title {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.8rem, 3.6vw, 3rem);
line-height: 1.18;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--white);
margin: 0 0 0.8em;
}
.eyebrow {
font-family: var(--sans);
font-weight: 500;
font-size: 0.72rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--accent);
transition: color 1.2s ease;
}
.eyebrow--mute {
color: var(--paper-2);
}
.eyebrow--edition {
color: var(--paper);
}
.lede {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(1.05rem, 1.4vw, 1.22rem);
color: var(--paper-2);
line-height: 1.6;
}
.italic {
font-style: italic;
}
/* =========================================================
LAYOUT BASE
Containers and section padding.
========================================================= */
.col {
width: var(--col);
margin-inline: auto;
}
.col-narrow {
width: var(--col-narrow);
margin-inline: auto;
}
section {
padding: clamp(56px, 6.5vw, 96px) 0;
position: relative;
}
/* =========================================================
SECTION BLEND | true transition between sections.
Each section declares --from (its color) and --to (the next
next). El degradado mantiene plano el 70% central
one), blending into the next color over the final 30%.
========================================================= */
.blend {
background: linear-gradient(
180deg,
var(--from) 0%,
var(--from) 25%,
var(--to) 75%,
var(--to) 100%
) !important;
}
/* compatibility: bleed-* classes are neutralized */
.bleed-top,
.bleed-bot,
.bleed-y {
box-shadow: none;
}
.center {
text-align: center;
}
/* Rule | brochure ornament (thin line with dot) */
.rule {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 1.2rem auto;
color: var(--paper-2);
}
.rule .l {
width: 46px;
height: 1px;
background: currentColor;
opacity: 0.45;
}
.rule .d {
width: 5px;
height: 5px;
background: currentColor;
border-radius: 50%;
}
.rule--left {
justify-content: flex-start;
margin-left: 0;
}
/* Line break visible only on mobile */
br.br-mobile {
display: none;
}
/* Helper inverso: visible en desktop, hidden en mobile */
.hide-mobile {
display: inline;
}
@media (max-width: 720px) {
br.br-mobile {
display: initial;
}
.hide-mobile {
display: none;
}
/* On mobile, rule--left becomes symmetric (-- | --) same as .rule */
.rule--left {
justify-content: center;
}
.rule--left::after {
content: "";
display: block;
width: 46px;
height: 1px;
background: currentColor;
opacity: 0.45;
}
}
/* =========================================================
ICONOS
---------------------------------------------------------
Icons vectoriales servidos como mask-image from data URIs.
Heredan el color del text (currentColor) y animatesn como
cualquier elemento con transform/opacity.
Usage en HTML:
<i class="icon icon--arrow" aria-hidden="true"></i>
========================================================= */
.icon {
display: inline-block;
vertical-align: middle;
background-color: currentColor;
/* By default the icon adopts its native size; each
modificador define su propio width/height. */
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Arrow derecha | CTAs (14×10) */
.icon--arrow {
width: 14px;
height: 10px;
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='square'%3E%3Cpath d='M1 5h12m0 0L9 1m4 4L9 9'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='square'%3E%3Cpath d='M1 5h12m0 0L9 1m4 4L9 9'/%3E%3C/svg%3E");
}
/* Up arrow | back-to-top button (14×14) */
.icon--arrow-up {
width: 14px;
height: 14px;
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='square'%3E%3Cpath d='M7 11V3M3 7l4-4 4 4'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='square'%3E%3Cpath d='M7 11V3M3 7l4-4 4 4'/%3E%3C/svg%3E");
}
/* Cruz de cierre | modal de bonos (16×16) */
.icon--close {
width: 16px;
height: 16px;
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M2 2l12 12M14 2L2 14'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M2 2l12 12M14 2L2 14'/%3E%3C/svg%3E");
}
/* =========================================================
CTA | pill-style buttons
Unified call-to-action system.
========================================================= */
.cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
font-family: var(--sans);
font-weight: 500;
font-size: 0.74rem;
letter-spacing: 0.32em;
text-transform: uppercase;
padding: 18px 38px;
border-radius: 999px;
border: 1px solid var(--paper);
color: var(--white);
background: transparent;
transition: all 0.25s ease;
text-decoration: none;
}
.cta:hover {
background: var(--white);
color: var(--ink);
border-color: var(--white);
}
/* Primario terracota (same as la web actual) */
.cta--terra {
background: var(--accent);
color: var(--white);
border-color: var(--accent);
transition:
background 1.2s ease,
border-color 1.2s ease,
color 0.25s ease,
transform 0.25s ease,
box-shadow 0.35s ease;
}
.cta--terra:hover {
background: var(--accent-deep);
border-color: var(--accent-deep);
color: var(--white);
}
/* Animated CTA (same treatment as the hero): continuous shimmer, sliding arrow, halo and expanded letter-spacing */
.cta--hero-anim {
position: relative;
overflow: hidden;
background: var(--accent);
color: var(--cta-text);
border-color: var(--accent);
box-shadow:
0 10px 30px -12px color-mix(in oklab, var(--accent) 55%, transparent),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
transition:
color 1.2s ease,
transform 0.35s ease,
box-shadow 1.2s ease,
letter-spacing 0.35s ease,
background 1.2s ease,
border-color 1.2s ease;
}
.cta--hero-anim .icon {
transition: transform 0.35s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.cta--hero-anim::after {
content: "";
position: absolute;
top: -20%;
bottom: -20%;
left: -30%;
width: 30%;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0) 75%
);
transform: skewX(-25deg);
pointer-events: none;
animation: ctaBrillo 5s ease-in-out infinite;
}
.cta--hero-anim:hover {
background: var(--accent-deep);
border-color: var(--accent-deep);
color: var(--cta-text);
box-shadow:
0 18px 44px -14px color-mix(in oklab, var(--accent) 95%, transparent),
0 0 0 6px color-mix(in oklab, var(--accent) 18%, transparent);
transform: translateY(-2px);
letter-spacing: 0.36em;
}
.cta--hero-anim:hover .icon {
transform: translateX(6px);
}
@media (prefers-reduced-motion: reduce) {
.cta--hero-anim::after {
display: none;
}
}
/* Featured variant — closing block: more volume, warm halo and visual weight */
.cta--xl {
/* force terra palette regardless of the active theme */
background: #d4845f;
border-color: #d4845f;
color: #fff;
padding: 22px 52px;
font-size: 0.82rem;
letter-spacing: 0.36em;
font-weight: 600;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
box-shadow:
0 22px 50px -14px rgba(212, 132, 95, 0.75),
0 0 0 1px rgba(212, 132, 95, 0.55),
0 0 0 6px rgba(212, 132, 95, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.cta--xl:hover {
background: #b86a47;
border-color: #b86a47;
color: #fff;
transform: translateY(-2px);
box-shadow:
0 30px 64px -14px rgba(212, 132, 95, 0.9),
0 0 0 1px rgba(212, 132, 95, 0.75),
0 0 0 8px rgba(212, 132, 95, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.cta-row {
margin-top: 2.4rem;
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* =========================================================
THEME PIVOT | terra ⇄ blue breath (HERO only)
Las custom properties se registran como <color> so that
so the animation actually interpolates (without @property they would be toggles).
The rest of the page stays on static burgundy.
========================================================= */
@property --accent {
syntax: "<color>";
inherits: true;
initial-value: #d4845f;
}
@property --accent-deep {
syntax: "<color>";
inherits: true;
initial-value: #b86a48;
}
@property --cta-text {
syntax: "<color>";
inherits: true;
initial-value: #1a0508;
}
.hero {
animation: brandPivot 30s ease-in-out infinite;
}
.hero.is-out,
.hero.is-out *,
.hero.is-out *::before,
.hero.is-out *::after {
animation-play-state: paused !important;
}
@keyframes brandPivot {
0%,
100% {
--accent: #d4845f;
--accent-deep: #b86a48;
--cta-text: #1a0508;
}
/* Dark text until the crossover — background still legible */
24% {
--cta-text: #1a0508;
}
/* Fast flip (0.6 s): from here on the background is dark enough */
26% {
--cta-text: #f4e9dc;
}
50% {
--accent: #4f032a;
--accent-deep: #2e021a;
--cta-text: #f4e9dc;
}
/* Mismo dot de cruce en el retorno */
74% {
--cta-text: #f4e9dc;
}
76% {
--cta-text: #1a0508;
}
}
@media (prefers-reduced-motion: reduce) {
.hero {
animation: none;
}
}
/* Spot override: force blue palette on a section if desired */
.theme-azul {
--accent: #7b9bbe;
--accent-deep: #5a7ba0;
--wine: #0b1622;
--wine-2: #101f30;
--wine-3: #162a3f;
}
section {
transition:
background 1.2s ease,
border-color 1.2s ease;
}
/* =========================================================
HEADER | banda fina superior tipo brochure
========================================================= */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
padding: 22px 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transition:
padding 0.35s ease,
background 0.35s ease,
backdrop-filter 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
padding: 14px 0;
background: rgba(10, 3, 6, 0.88);
backdrop-filter: blur(16px) saturate(130%);
-webkit-backdrop-filter: blur(16px) saturate(130%);
border-bottom-color: color-mix(in oklab, var(--accent) 18%, transparent);
box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.7);
}
.site-header .col {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.site-header__brand {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
}
.site-header__mark {
height: 32px;
width: auto;
display: block;
filter: brightness(0) invert(1) opacity(0.92);
transition:
height 0.35s ease,
opacity 0.35s ease,
transform 0.35s ease;
}
.site-header.is-scrolled .site-header__mark {
height: 26px;
opacity: 1;
}
.site-header__brand:hover .site-header__mark {
transform: scale(1.06);
}
.site-header__wordmark {
font-family: var(--serif);
letter-spacing: 0.34em;
text-transform: uppercase;
color: #f4e9dc;
font-size: 0.92rem;
line-height: 1;
white-space: nowrap;
/* hidden in the hero, appears on scroll with horizontal expansion */
display: inline-block;
max-width: 0;
opacity: 0;
overflow: hidden;
transform: translateX(-6px);
transition:
max-width 0.55s cubic-bezier(0.65, 0.05, 0.36, 1),
opacity 0.35s ease 0.05s,
transform 0.55s cubic-bezier(0.65, 0.05, 0.36, 1),
font-size 0.35s ease;
}
.site-header.is-scrolled .site-header__wordmark {
max-width: 280px;
opacity: 1;
transform: translateX(0);
font-size: 0.82rem;
}
.site-header nav {
display: flex;
gap: 30px;
font-family: var(--sans);
font-weight: 500;
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(244, 233, 220, 0.85);
}
.site-header nav a {
position: relative;
color: inherit;
text-decoration: none;
padding: 6px 0;
transition: color 0.25s ease;
}
.site-header nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
/* Gradient with a brighter "highlight" in the center that travels
gracias al shimmer; al estar al 200% del wide podemos animate
background-position de -100% a 100% sin romper los borders. */
background: linear-gradient(
90deg,
rgba(212, 132, 95, 0.65) 0%,
rgba(212, 132, 95, 0.95) 35%,
#f4e9dc 50%,
rgba(212, 132, 95, 0.95) 65%,
rgba(212, 132, 95, 0.65) 100%
);
background-size: 200% 100%;
background-position: 100% 0;
box-shadow: 0 0 0 rgba(212, 132, 95, 0);
transition:
opacity 0.5s ease,
box-shadow 0.6s ease;
opacity: 0;
}
.site-header nav a:hover {
color: #f4e9dc;
}
.site-header nav a:hover::after,
.site-header nav a.is-active::after {
opacity: 1;
box-shadow:
0 0 6px rgba(212, 132, 95, 0.55),
0 0 14px rgba(212, 132, 95, 0.25);
animation: navUnderlineShimmer 7.5s ease-in-out infinite;
}
@keyframes navUnderlineShimmer {
0% {
background-position: 100% 0;
}
50% {
background-position: -100% 0;
}
100% {
background-position: 100% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.site-header nav a:hover::after,
.site-header nav a.is-active::after {
animation: none;
}
}
.site-header nav a.is-active {
color: #f4e9dc;
}
/* Acceso siempre featured en cream */
.site-header nav a[style*="font-weight:600"] {
color: #f4e9dc;
}
/* =========================================================
MOBILE NAV | hamburger button + burgundy overlay
========================================================= */
.nav-toggle {
display: none;
position: relative;
z-index: 21;
width: 42px;
height: 42px;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.nav-toggle__bars {
position: absolute;
left: 50%;
top: 50%;
width: 22px;
height: 14px;
transform: translate(-50%, -50%);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1.4px;
background: #f4e9dc;
transition:
transform 0.35s cubic-bezier(0.65, 0.05, 0.36, 1),
top 0.25s ease,
opacity 0.25s ease;
transform-origin: center;
}
.nav-toggle__bars::before {
top: 0;
}
.nav-toggle__bars::after {
bottom: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
bottom: auto;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
.nav-overlay {
position: fixed;
inset: 0;
z-index: 19;
background: rgba(10, 3, 6, 0.96);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.35s ease,
visibility 0.35s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 24px 40px;
overflow: hidden;
}
.nav-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
}
/* Star layer inside the overlay to keep the hero atmosphere */
.nav-overlay::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(
1px 1px at 12% 18%,
rgba(244, 233, 220, 0.6) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 82% 12%,
rgba(244, 233, 220, 0.5) 50%,
transparent 100%
),
radial-gradient(
1.4px 1.4px at 26% 76%,
rgba(244, 233, 220, 0.7) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 60% 32%,
rgba(244, 233, 220, 0.4) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 90% 58%,
rgba(244, 233, 220, 0.5) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 8% 50%,
rgba(244, 233, 220, 0.4) 50%,
transparent 100%
),
radial-gradient(
1.2px 1.2px at 44% 8%,
rgba(244, 233, 220, 0.55) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 70% 88%,
rgba(244, 233, 220, 0.45) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 36% 44%,
rgba(212, 132, 95, 0.4) 50%,
transparent 100%
),
radial-gradient(
1.3px 1.3px at 76% 72%,
rgba(212, 132, 95, 0.5) 50%,
transparent 100%
);
-webkit-mask: radial-gradient(
ellipse 60% 60% at 50% 50%,
transparent 0%,
#000 75%
);
mask: radial-gradient(ellipse 60% 60% at 50% 50%, transparent 0%, #000 75%);
opacity: 0.7;
}
.nav-overlay::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(620px, 80vmin);
aspect-ratio: 1/1;
background: radial-gradient(
ellipse 50% 50% at 50% 50%,
rgba(212, 132, 95, 0.18) 0%,
transparent 70%
);
pointer-events: none;
}
.nav-overlay__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.nav-overlay__mark {
display: block;
height: 42px;
width: auto;
margin-bottom: 24px;
filter: brightness(0) invert(1);
}
.nav-overlay__list {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
list-style: none;
padding: 0;
margin: 0;
}
.nav-overlay__list a {
display: inline-block;
padding: 14px 12px;
font-family: var(--serif);
font-weight: 400;
font-size: 1.35rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #f4e9dc;
text-decoration: none;
position: relative;
opacity: 0;
transform: translateY(14px);
transition:
opacity 0.5s ease,
transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1),
color 0.25s ease;
}
.nav-overlay.is-open .nav-overlay__list a {
opacity: 1;
transform: translateY(0);
}
.nav-overlay__list li:nth-child(1) a {
transition-delay: 0.1s;
}
.nav-overlay__list li:nth-child(2) a {
transition-delay: 0.16s;
}
.nav-overlay__list li:nth-child(3) a {
transition-delay: 0.22s;
}
.nav-overlay__list li:nth-child(4) a {
transition-delay: 0.28s;
}
.nav-overlay__list li:nth-child(5) a {
transition-delay: 0.34s;
}
.nav-overlay__list li:nth-child(6) a {
transition-delay: 0.4s;
}
.nav-overlay__list li:nth-child(7) a {
transition-delay: 0.46s;
}
.nav-overlay__list li:nth-child(8) a {
transition-delay: 0.52s;
}
.nav-overlay__list li:nth-child(9) a {
transition-delay: 0.58s;
}
.nav-overlay__list a::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 8px;
height: 1px;
background: #d4845f;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.35s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.nav-overlay__list a:hover::after,
.nav-overlay__list a.is-active::after {
transform: scaleX(1);
}
.nav-overlay__list a.is-acceso {
margin-top: 14px;
padding: 14px 32px;
border: 1px solid rgba(244, 233, 220, 0.5);
border-radius: 999px;
font-size: 0.78rem;
letter-spacing: 0.32em;
}
.nav-overlay__list a.is-acceso::after {
display: none;
}
.nav-overlay__list a.is-acceso:hover {
background: #d4845f;
border-color: #d4845f;
color: #1a0508;
}
body.nav-locked {
overflow: hidden;
}
/* When the overlay is open, the header becomes transparent and lifts above
so the "X" button stays accessible and the header isotype blurs */
body.nav-locked .site-header {
z-index: 22;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border-bottom-color: transparent !important;
}
body.nav-locked .site-header__brand {
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
/* =========================================================
HERO | portada del libro | dark como brochure
exact 100vh, no overflow, with expanding octagons
The hero pivots cyclically between burgundy and slate blue (24s),
y arrastra al --accent (botones, shine, halo) en el mismo ciclo.
========================================================= */
.hero {
position: relative;
height: 100vh;
min-height: 640px;
max-height: 100vh;
display: flex;
flex-direction: column;
background: #000;
overflow: hidden;
padding: 0;
}
/* Mask to fade ALL hero visuals (bg, stars, rings, grain) to transparent
at the bottom 22%, so it dissolves seamlessly into the next section. */
.hero__bg,
.hero__rings,
.hero__stars,
.hero__veil-azul {
-webkit-mask-image: linear-gradient(
180deg,
#000 0%,
#000 70%,
transparent 100%
);
mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
/* Dark deep-burgundy background + warm central halo where the rosette sits.
La capa base stays dark, sobre ella se cruzan dos veils
(burgundy y azul) que opacan/desopacan en bucle para dar el pivote. */
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(
ellipse 140% 90% at 50% 100%,
rgba(10, 2, 4, 0.85) 0%,
transparent 70%
),
linear-gradient(180deg, #1a0810 0%, #120612 50%, #0c0610 100%);
}
/* BURGUNDY veil (visible at the start of the cycle) */
.hero__bg::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
ellipse 38% 38% at 50% 48%,
rgba(212, 132, 95, 0.55) 0%,
rgba(184, 106, 72, 0.25) 25%,
rgba(92, 15, 27, 0.1) 55%,
transparent 75%
),
radial-gradient(
ellipse 140% 90% at 50% 0%,
rgba(92, 15, 27, 0.55) 0%,
transparent 65%
);
opacity: 1;
/* Promote a capa GPU: opacity se compone en GPU sin repaint. */
will-change: opacity;
transform: translateZ(0);
animation: heroVeilWine 30s ease-in-out infinite;
}
/* PURPLE BOOK veil (visible at the middle of the cycle) */
.hero__veil-azul {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(
ellipse 38% 38% at 50% 48%,
rgba(79, 3, 42, 0.7) 0%,
rgba(79, 3, 42, 0.4) 25%,
rgba(46, 2, 26, 0.18) 55%,
transparent 75%
),
radial-gradient(
ellipse 140% 90% at 50% 0%,
rgba(46, 2, 26, 0.65) 0%,
transparent 65%
);
opacity: 0;
will-change: opacity;
transform: translateZ(0);
animation: heroVeilAzul 30s ease-in-out infinite;
}
@keyframes heroVeilWine {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes heroVeilAzul {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
/* Subtle octagons that expand outward like a wave */
.hero__rings {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero__rings svg {
width: min(2400px, 200vmax);
height: min(2400px, 200vmax);
display: block;
overflow: visible;
}
.hero__rings polygon {
fill: color-mix(in oklab, var(--accent) 2.5%, transparent);
stroke: var(--accent);
stroke-width: 1;
vector-effect: non-scaling-stroke;
transform-origin: center;
transform-box: fill-box;
opacity: 0;
will-change: transform, opacity;
animation: ringWave 22s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
transition: stroke 1.2s ease;
}
.hero__rings polygon:nth-of-type(1) {
animation-delay: 0s;
}
.hero__rings polygon:nth-of-type(2) {
animation-delay: 4.4s;
}
.hero__rings polygon:nth-of-type(3) {
animation-delay: 8.8s;
}
.hero__rings polygon:nth-of-type(4) {
animation-delay: 13.2s;
}
.hero__rings polygon:nth-of-type(5) {
animation-delay: 17.6s;
}
@keyframes ringWave {
0% {
transform: scale(0.22);
opacity: 0;
stroke-opacity: 0.32;
}
18% {
opacity: 0.55;
}
65% {
opacity: 0.28;
stroke-opacity: 0.16;
}
100% {
transform: scale(2.4);
opacity: 0;
stroke-opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.hero__rings polygon {
animation: none;
opacity: 0.4;
transform: scale(1);
}
}
/* Granulado sutil */
.hero__bg::after {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(
circle at 20% 20%,
rgba(244, 233, 220, 0.04) 0,
transparent 1px
),
radial-gradient(
circle at 70% 60%,
rgba(244, 233, 220, 0.03) 0,
transparent 1px
),
radial-gradient(
circle at 40% 80%,
rgba(244, 233, 220, 0.03) 0,
transparent 1px
);
background-size:
3px 3px,
5px 5px,
4px 4px;
opacity: 0.7;
pointer-events: none;
}
/* Background stars | layer between background and rings */
.hero__stars {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
/* Multiple layers of tiny dots in pseudo-random positions */
background-image:
radial-gradient(
1px 1px at 12% 18%,
rgba(244, 233, 220, 0.85) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 82% 12%,
rgba(244, 233, 220, 0.7) 50%,
transparent 100%
),
radial-gradient(
1.4px 1.4px at 26% 76%,
rgba(244, 233, 220, 0.95) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 60% 32%,
rgba(244, 233, 220, 0.55) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 90% 58%,
rgba(244, 233, 220, 0.65) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 8% 50%,
rgba(244, 233, 220, 0.55) 50%,
transparent 100%
),
radial-gradient(
1.2px 1.2px at 44% 8%,
rgba(244, 233, 220, 0.75) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 70% 88%,
rgba(244, 233, 220, 0.6) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 36% 44%,
rgba(212, 132, 95, 0.45) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 18% 92%,
rgba(244, 233, 220, 0.5) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 96% 30%,
rgba(244, 233, 220, 0.55) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 52% 62%,
rgba(244, 233, 220, 0.45) 50%,
transparent 100%
),
radial-gradient(
1.3px 1.3px at 76% 72%,
rgba(212, 132, 95, 0.55) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 4% 28%,
rgba(244, 233, 220, 0.6) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 32% 22%,
rgba(244, 233, 220, 0.5) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 64% 18%,
rgba(244, 233, 220, 0.5) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 88% 84%,
rgba(244, 233, 220, 0.55) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 22% 36%,
rgba(244, 233, 220, 0.4) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 56% 80%,
rgba(244, 233, 220, 0.5) 50%,
transparent 100%
),
radial-gradient(
1.5px 1.5px at 14% 64%,
rgba(244, 233, 220, 0.85) 50%,
transparent 100%
);
/* Dim the stars in the central area where the brand sits */
-webkit-mask: radial-gradient(
ellipse 38% 38% at 50% 50%,
transparent 0%,
rgba(0, 0, 0, 0.45) 45%,
#000 75%
);
mask: radial-gradient(
ellipse 38% 38% at 50% 50%,
transparent 0%,
rgba(0, 0, 0, 0.45) 45%,
#000 75%
);
will-change: opacity;
transform: translateZ(0);
animation: starsTwinkle 6s ease-in-out infinite alternate;
}
/* Extra layer of "flash" stars that appear and disappear at
different positions, simulating a breathing sky. */
.hero__stars::before,
.hero__stars::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
-webkit-mask: inherit;
mask: inherit;
}
.hero__stars::before {
background-image:
radial-gradient(1.6px 1.6px at 16% 30%, #f4e9dc 50%, transparent 100%),
radial-gradient(1.4px 1.4px at 78% 22%, #f4e9dc 50%, transparent 100%),
radial-gradient(1.8px 1.8px at 40% 70%, #f4e9dc 50%, transparent 100%),
radial-gradient(
1.2px 1.2px at 92% 48%,
rgba(212, 132, 95, 0.95) 50%,
transparent 100%
),
radial-gradient(1.4px 1.4px at 6% 78%, #f4e9dc 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 62% 12%, #f4e9dc 50%, transparent 100%);
opacity: 0;
will-change: opacity;
transform: translateZ(0);
animation: starsBlink 7s ease-in-out infinite;
}
.hero__stars::after {
background-image:
radial-gradient(1.4px 1.4px at 28% 14%, #f4e9dc 50%, transparent 100%),
radial-gradient(
1.6px 1.6px at 70% 60%,
rgba(212, 132, 95, 0.9) 50%,
transparent 100%
),
radial-gradient(1.2px 1.2px at 50% 28%, #f4e9dc 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 86% 82%, #f4e9dc 50%, transparent 100%),
radial-gradient(1.3px 1.3px at 12% 56%, #f4e9dc 50%, transparent 100%),
radial-gradient(1.4px 1.4px at 34% 88%, #f4e9dc 50%, transparent 100%);
opacity: 0;
will-change: opacity;
transform: translateZ(0);
animation: starsBlink 9s ease-in-out infinite 2.4s;
filter: drop-shadow(0 0 2px rgba(244, 233, 220, 0.55));
}
@keyframes starsTwinkle {
from {
opacity: 0.55;
}
to {
opacity: 0.95;
}
}
@keyframes starsBlink {
0%,
100% {
opacity: 0;
}
20% {
opacity: 0.95;
}
45% {
opacity: 0.2;
}
65% {
opacity: 0.85;
}
85% {
opacity: 0.1;
}
}
@media (prefers-reduced-motion: reduce) {
.hero__stars::before,
.hero__stars::after,
.site-footer__stars::before,
.site-footer__stars::after {
animation: none;
opacity: 0.4;
}
}
.hero__inner {
position: relative;
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 90px clamp(20px, 4vw, 60px) 40px;
text-align: center;
gap: 0.7rem;
min-height: 0;
}
.hero__date {
font-family: var(--serif);
font-weight: 400;
font-size: 0.74rem;
letter-spacing: 0.55em;
text-transform: uppercase;
color: rgba(244, 233, 220, 0.75);
margin: 0;
}
.hero__eyebrow {
font-family: var(--serif);
font-style: italic;
font-size: clamp(0.95rem, 1.25vw, 1.15rem);
letter-spacing: 0.04em;
color: rgba(244, 233, 220, 0.85);
margin: 0;
}
/* Central composition: key + Narratipos wordmark */
.hero__brand {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(14px, 2vh, 24px);
margin: 0.4rem auto;
animation: heroFloat 6s ease-in-out infinite alternate;
}
.hero__key {
display: block;
width: auto;
height: clamp(180px, 32vh, 300px);
filter: drop-shadow(
0 0 24px color-mix(in oklab, var(--accent) 45%, transparent)
)
drop-shadow(0 12px 30px rgba(0, 0, 0, 0.55));
transition: filter 1.2s ease;
}
.hero__wordmark {
display: block;
width: auto;
height: clamp(38px, 7vh, 72px);
max-width: 78vw;
object-fit: contain;
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
}
@keyframes heroFloat {
from {
transform: translateY(0);
}
to {
transform: translateY(-8px);
}
}
.hero__sub {
font-family: var(--sans);
font-weight: 400;
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
color: rgba(244, 233, 220, 0.88);
line-height: 1.5;
max-width: 46ch;
margin: 0.2rem auto 0;
}
.hero__meta {
margin-top: 0.3rem;
font-family: var(--sans);
font-weight: 400;
font-size: 0.82rem;
color: rgba(244, 233, 220, 0.7);
}
.hero__meta b {
color: var(--accent);
font-weight: 500;
transition: color 1.2s ease;
}
.hero .cta-row {
margin-top: 1.1rem;
}
/* ===== Hero CTAs | editorial pair ===== */
/* Primary: solid accent (pivots terra⇄blue) with continuous shimmer */
.hero .cta--terra {
position: relative;
overflow: hidden;
background: var(--accent);
color: var(--cta-text);
border-color: var(--accent);
box-shadow:
0 10px 30px -12px color-mix(in oklab, var(--accent) 55%, transparent),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
transition:
transform 0.35s ease,
box-shadow 1.2s ease,
letter-spacing 0.35s ease,
background 1.2s ease,
border-color 1.2s ease;
}
.hero .cta--terra .icon {
transition: transform 0.35s cubic-bezier(0.65, 0.05, 0.36, 1);
}
/* Diagonal brightness that travels across the button every 5s */
.hero .cta--terra::after {
content: "";
position: absolute;
top: -20%;
bottom: -20%;
left: -30%;
width: 30%;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0) 75%
);
transform: skewX(-25deg);
pointer-events: none;
animation: ctaBrillo 5s ease-in-out infinite;
}
.hero .cta--terra:hover {
background: var(--accent-deep);
border-color: var(--accent-deep);
color: var(--cta-text);
box-shadow:
0 18px 44px -14px color-mix(in oklab, var(--accent) 95%, transparent),
0 0 0 6px color-mix(in oklab, var(--accent) 18%, transparent);
transform: translateY(-2px);
letter-spacing: 0.36em;
}
.hero .cta--terra:hover .icon {
transform: translateX(6px);
}
@keyframes ctaBrillo {
0% {
left: -30%;
opacity: 0;
}
10% {
opacity: 1;
}
60% {
left: 130%;
opacity: 1;
}
100% {
left: 130%;
opacity: 0;
}
}
/* Secundario: ghost con underline animated */
.hero .cta:not(.cta--terra) {
background: transparent;
border-color: transparent;
color: rgba(244, 233, 220, 0.85);
padding: 18px 14px;
letter-spacing: 0.32em;
position: relative;
border-radius: 0;
transition:
color 0.25s ease,
letter-spacing 0.35s ease;
}
.hero .cta:not(.cta--terra)::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 12px;
height: 1px;
background: rgba(244, 233, 220, 0.35);
transform-origin: left center;
transition:
background 0.25s ease,
transform 0.45s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.hero .cta:not(.cta--terra):hover {
color: #f4e9dc;
background: transparent;
border-color: transparent;
letter-spacing: 0.36em;
}
.hero .cta:not(.cta--terra):hover::after {
background: #d4845f;
transform: scaleX(1.04);
}
@media (prefers-reduced-motion: reduce) {
.hero .cta--terra::after {
display: none;
}
}
/* =========================================================
AMBIENTE | eco del hero en otras secciones
- .amb-wine → superficie burgundy profundo (continuidad del hero)
- .amb-stars → capa de stars + halo terra sutil
- .amb-mark → rotating brand watermark octagon, very slow
All three can be combined. Designed not to compete with the content.
========================================================= */
.amb-wine {
background: var(--wine);
}
.amb-wine + .amb-wine {
/* dos secciones burgundy seguidas: rule terra entre ambas */
border-top: 1px solid var(--wine-line);
}
/* Layer de stars tenue (much less dense than the hero, to avoid stealing focus) */
.amb-stars {
position: relative;
isolation: isolate;
}
.amb-stars > * {
position: relative;
z-index: 2;
}
.amb-stars::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(
1px 1px at 14% 22%,
rgba(244, 233, 220, 0.55) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 78% 14%,
rgba(244, 233, 220, 0.45) 50%,
transparent 100%
),
radial-gradient(
1.2px 1.2px at 32% 78%,
rgba(244, 233, 220, 0.55) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 62% 36%,
rgba(244, 233, 220, 0.35) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 88% 64%,
rgba(244, 233, 220, 0.4) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 6% 56%,
rgba(244, 233, 220, 0.35) 50%,
transparent 100%
),
radial-gradient(
1.2px 1.2px at 46% 8%,
rgba(244, 233, 220, 0.45) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 72% 90%,
rgba(244, 233, 220, 0.35) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 38% 48%,
rgba(212, 132, 95, 0.3) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 18% 92%,
rgba(244, 233, 220, 0.3) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 94% 32%,
rgba(244, 233, 220, 0.35) 50%,
transparent 100%
),
radial-gradient(
1.3px 1.3px at 76% 70%,
rgba(212, 132, 95, 0.4) 50%,
transparent 100%
);
/* attenuation toward the center (does not compete with text) and fade on top/bottom borders so the seam between sections is not visible */
-webkit-mask:
radial-gradient(
ellipse 60% 60% at 50% 50%,
rgba(0, 0, 0, 0.35) 0%,
#000 75%
),
linear-gradient(
180deg,
transparent 0%,
transparent 8%,
#000 30%,
#000 70%,
transparent 92%,
transparent 100%
);
-webkit-mask-composite: source-in;
mask:
radial-gradient(
ellipse 60% 60% at 50% 50%,
rgba(0, 0, 0, 0.35) 0%,
#000 75%
),
linear-gradient(
180deg,
transparent 0%,
transparent 8%,
#000 30%,
#000 70%,
transparent 92%,
transparent 100%
);
mask-composite: intersect;
opacity: 0.55;
animation: ambStars 9s ease-in-out infinite alternate;
}
@keyframes ambStars {
from {
opacity: 0.4;
}
to {
opacity: 0.7;
}
}
/* Halo warm (accent) very wide, as a continuation of the hero warmth.
Usa --accent en color-mix so that pivote al cambiar de theme. */
.amb-stars.amb-glow::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(
ellipse 70% 50% at 50% 0%,
color-mix(in oklab, var(--accent) 18%, transparent) 0%,
transparent 60%
),
radial-gradient(
ellipse 70% 50% at 50% 100%,
rgba(92, 15, 27, 0.3) 0%,
transparent 65%
);
-webkit-mask-image: linear-gradient(
180deg,
transparent 0%,
transparent 6%,
#000 28%,
#000 72%,
transparent 94%,
transparent 100%
);
mask-image: linear-gradient(
180deg,
transparent 0%,
transparent 6%,
#000 28%,
#000 72%,
transparent 94%,
transparent 100%
);
transition: background 1.2s ease;
}
/* Brand watermark octagon: subtle but perceptible, giant, slowly rotating */
.amb-mark {
position: relative;
isolation: isolate;
}
.amb-mark > * {
position: relative;
z-index: 2;
}
.amb-mark::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: min(900px, 90vmax);
aspect-ratio: 1/1;
z-index: 0;
pointer-events: none;
transform: translate(-50%, -50%);
/* the octagon is drawn with a double border via clip-path + box-shadow inset */
border: 1.5px solid color-mix(in oklab, var(--accent) 32%, transparent);
box-shadow:
inset 0 0 0 1px color-mix(in oklab, var(--accent) 8%, transparent),
inset 0 0 80px color-mix(in oklab, var(--accent) 6%, transparent);
clip-path: polygon(
50% 0,
85.36% 14.64%,
100% 50%,
85.36% 85.36%,
50% 100%,
14.64% 85.36%,
0 50%,
14.64% 14.64%
);
animation: ambMark 60s linear infinite;
opacity: 0.95;
transition:
border-color 1.2s ease,
box-shadow 1.2s ease;
}
/* Inner concentric octagon to reinforce the brand motif */
.amb-mark::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: min(560px, 56vmax);
aspect-ratio: 1/1;
z-index: 0;
pointer-events: none;
transform: translate(-50%, -50%);
border: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
clip-path: polygon(
50% 0,
85.36% 14.64%,
100% 50%,
85.36% 85.36%,
50% 100%,
14.64% 85.36%,
0 50%,
14.64% 14.64%
);
animation: ambMarkInner 90s linear infinite reverse;
opacity: 0.85;
transition: border-color 1.2s ease;
}
@keyframes ambMark {
from {
transform: translate(-50%, -50%) rotate(0);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes ambMarkInner {
from {
transform: translate(-50%, -50%) rotate(0);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.amb-stars::before,
.amb-mark::after,
.amb-mark::before {
animation: none;
}
}
/* =========================================================
MANIFIESTO
========================================================= */
#para-quien {
content-visibility: auto;
contain-intrinsic-size: 1px 1200px;
}
.manifiesto {
background: var(--wine);
text-align: center;
padding-block: clamp(72px, 9vw, 120px);
}
.manifiesto h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.9rem, 4vw, 3.2rem);
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.32;
color: var(--white);
margin: 0 auto;
max-width: 24ch;
}
.manifiesto h2 .br {
display: block;
margin-top: 0.45em;
}
.manifiesto h2 em {
font-style: italic;
color: var(--paper-2);
font-weight: 500;
letter-spacing: 0.16em;
}
/* =========================================================
EDITORIAL (foto + text)
========================================================= */
#que-es {
content-visibility: auto;
contain-intrinsic-size: 1px 1200px;
}
.editorial {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 7vw, 110px);
align-items: center;
}
.editorial__photo {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
border-radius: 4px; /* discreet, not organic */
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.editorial__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.editorial__photo-credit {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 28px 20px 14px;
font-family: var(--serif);
font-style: italic;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: rgba(244, 233, 220, 0.82);
text-align: left;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
pointer-events: none;
z-index: 2;
}
@media (max-width: 720px) {
.editorial__photo-credit {
padding: 20px 14px 10px;
font-size: 0.62rem;
letter-spacing: 0.02em;
}
}
.editorial p {
color: var(--paper);
margin: 0 0 0.9rem;
text-align: justify;
hyphens: auto;
font-size: 0.95rem;
line-height: 1.65;
}
.editorial p.eyebrow {
color: var(--accent);
margin: 0 0 0.8em;
text-align: left;
font-size: 0.72rem;
line-height: 1.4;
}
.editorial .lede {
margin: 0 0 1.6rem;
text-align: left;
}
.editorial .h-title {
text-align: left;
}
.autor__body p {
text-align: justify;
hyphens: auto;
}
/* Cierre resaltado de bloques editoriales (para-quien, que-es)
— quote block with an accent top rule, serif typography,
more visual weight to anchor the key idea. */
.editorial__cierre {
position: relative;
margin-top: 2.2rem;
padding: 1.4rem 0 1.4rem 1.4rem;
border-left: 2px solid var(--accent);
/* Block normal (no flex) so that los text nodes y el <em> respeten
el word-spacing/letter-spacing y no quede el "ser patrimonio" pegado. */
display: block;
color: var(--white);
font-family: var(--serif);
font-size: clamp(1.05rem, 1.45vw, 1.25rem);
line-height: 1.45;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: left;
hyphens: none;
transition: border-color 1.2s ease;
}
.editorial__cierre em {
font-style: italic;
color: var(--accent);
letter-spacing: 0.04em;
transition: color 1.2s ease;
}
.editorial__cierre--serif {
letter-spacing: 0.04em;
text-transform: none;
font-style: italic;
}
/* =========================================================
QUE APRENDERAS
========================================================= */
.aprenderas {
background: var(--wine-2);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Brand watermark giant octagon in the background (full size, clamped so
nunca se recorte por la altura del viewport) */
.aprenderas {
min-height: min(100vh, 1080px);
}
.aprenderas::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
z-index: 0;
pointer-events: none;
width: min(980px, 92vw, 92vh);
height: min(980px, 92vw, 92vh);
transform: translate(-50%, -50%);
border: 1.5px solid color-mix(in oklab, var(--accent) 22%, transparent);
box-shadow:
inset 0 0 0 1px color-mix(in oklab, var(--accent) 8%, transparent),
inset 0 0 120px color-mix(in oklab, var(--accent) 10%, transparent);
clip-path: polygon(
50% 0,
85.36% 14.64%,
100% 50%,
85.36% 85.36%,
50% 100%,
14.64% 85.36%,
0 50%,
14.64% 14.64%
);
animation: ambMark 80s linear infinite;
transition:
border-color 1.2s ease,
box-shadow 1.2s ease;
}
@media (prefers-reduced-motion: reduce) {
.aprenderas::before {
animation: none;
}
}
/* Veladuras radiales laterales tipo hero */
.aprenderas::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(
ellipse 38% 55% at 0% 50%,
color-mix(in oklab, var(--accent) 16%, transparent) 0%,
transparent 65%
),
radial-gradient(
ellipse 38% 55% at 100% 50%,
rgba(92, 15, 27, 0.35) 0%,
transparent 65%
),
radial-gradient(
ellipse 70% 40% at 50% 100%,
rgba(10, 2, 4, 0.55) 0%,
transparent 65%
);
-webkit-mask-image: linear-gradient(
180deg,
transparent 0%,
transparent 6%,
#000 28%,
#000 72%,
transparent 94%,
transparent 100%
);
mask-image: linear-gradient(
180deg,
transparent 0%,
transparent 6%,
#000 28%,
#000 72%,
transparent 94%,
transparent 100%
);
transition: background 1.2s ease;
}
.aprenderas > * {
position: relative;
z-index: 2;
}
.aprenderas .col-narrow {
width: var(--col);
}
.aprenderas__list {
margin-top: 3.2rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(26px, 2.8vw, 42px);
}
.aprende {
position: relative;
padding: 44px 40px 38px;
background: rgba(10, 3, 6, 0.45);
border: 1px solid var(--wine-line);
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 20px;
transition:
border-color 1.2s ease,
background 1.2s ease,
transform 0.35s ease;
}
.aprende:hover {
transform: translateY(-3px);
border-color: color-mix(in oklab, var(--accent) 55%, transparent);
background: rgba(10, 3, 6, 0.7);
}
.aprende__num {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: 2.2rem;
color: var(--accent);
letter-spacing: 0.08em;
line-height: 1;
transition: color 1.2s ease;
}
.aprende__title {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.15rem, 1.5vw, 1.35rem);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--white);
line-height: 1.3;
margin: 0;
}
.aprende__lead {
font-family: var(--sans);
font-weight: 400;
font-size: clamp(0.95rem, 1.05vw, 1.02rem);
color: var(--white);
line-height: 1.6;
letter-spacing: 0.01em;
margin: 0;
text-align: justify;
hyphens: auto;
}
.aprende__lead strong {
font-family: var(--serif);
color: var(--accent);
font-weight: 500;
letter-spacing: 0.01em;
transition: color 1.2s ease;
}
.aprende__note {
font-family: var(--serif);
font-style: italic;
font-size: 0.92rem;
color: var(--paper-2);
line-height: 1.55;
padding-top: 14px;
border-top: 1px solid var(--wine-line);
margin: 0;
text-align: justify;
hyphens: auto;
transition: border-color 1.2s ease;
}
@media (max-width: 900px) {
.aprenderas__list {
grid-template-columns: 1fr;
gap: 18px;
}
}
/* =========================================================
8 NARRATIPOS | brand rosette tinted by color
========================================================= */
.narratipos {
background: var(--wine);
text-align: center;
}
.narratipos__grid {
margin-top: 4.5rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 50px 30px;
max-width: 1040px;
margin-inline: auto;
}
.narratipo {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
padding: 14px 8px;
}
.narratipo__icon {
width: 128px;
height: 128px;
background: var(--c);
display: grid;
place-items: center;
border-radius: 6px;
transition: transform 0.35s ease;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
position: relative;
overflow: hidden;
}
.narratipo__icon::after {
/* subtle vignette to add depth */
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at 30% 25%,
rgba(255, 255, 255, 0.18),
transparent 65%
);
pointer-events: none;
}
.narratipo__icon img {
width: 78%;
height: auto;
position: relative;
z-index: 1;
}
.narratipo:hover .narratipo__icon {
transform: scale(1.06);
}
.narratipo__name {
font-family: var(--serif);
font-size: 0.92rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--paper);
}
/* =========================================================
CERTIFICACION | 8 MÓDULOS (cintas de color)
========================================================= */
.certificacion {
background: var(--wine);
position: relative;
}
.modulos {
margin-top: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
background: transparent;
}
.modulo {
position: relative;
padding: 48px 40px 48px 78px;
background: linear-gradient(
180deg,
color-mix(in oklab, color-mix(in oklab, var(--wine-2) 88%, #000) 28%, transparent) 0%,
color-mix(in oklab, color-mix(in oklab, var(--wine) 92%, #000) 28%, transparent) 100%
);
border: 1px solid var(--wine-line);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 18px 40px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(12px) saturate(140%) brightness(115%);
transition:
background 0.35s ease,
border-color 0.35s ease,
transform 0.35s ease;
}
.modulo::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
color-mix(in oklab, var(--c) 18%, transparent) 0%,
color-mix(in oklab, var(--c) 6%, transparent) 100%
);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.modulo:hover {
border-color: color-mix(in oklab, var(--c) 35%, var(--wine-line));
}
.modulo:hover::before {
opacity: 1;
}
.modulo > * {
position: relative;
z-index: 1;
}
.modulo__band {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background: var(--c);
}
.modulo__mockup {
display: block;
width: 100%;
max-width: 240px;
height: auto;
margin: 0 auto 18px;
aspect-ratio: 1 / 1;
object-fit: contain;
object-position: center;
filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.4));
opacity: 1;
transition:
opacity 0.35s ease,
filter 0.35s ease;
}
.modulo:hover .modulo__mockup {
opacity: 0.7;
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55));
}
@media (max-width: 720px) {
.modulo__mockup {
max-width: 200px;
margin-bottom: 10px;
}
}
.modulo__num {
font-family: var(--sans);
font-weight: 500;
font-size: 0.7rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--c);
margin-bottom: 0.6rem;
}
.modulo__title {
font-family: var(--serif);
font-weight: 400;
font-size: 1.4rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--white);
margin: 0 0 0.9rem;
}
.modulo__sub {
font-size: 0.9rem;
color: var(--paper-2);
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin-bottom: 1.1rem;
}
.modulo__sub span + span::before {
content: "|";
color: var(--c);
margin-right: 14px;
opacity: 0.7;
}
.modulo__desc {
color: var(--paper);
font-size: 0.95rem;
line-height: 1.65;
margin: 0;
}
/* =========================================================
MOMENTOS NARRATIPOS (calendario)
- banda navy como en la brochure
========================================================= */
.momentos {
background: var(--navy);
position: relative;
overflow: hidden;
}
.momentos::before {
content: "";
position: absolute;
inset: 0;
background: url("https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/c3ffd6e5-7749-42e2-8114-67e37003bd57.jpg")
center/cover no-repeat;
opacity: 0.45;
mix-blend-mode: multiply;
filter: brightness(0.5) contrast(1.05);
-webkit-mask-image: linear-gradient(
180deg,
transparent 0%,
#000 14%,
#000 86%,
transparent 100%
);
mask-image: linear-gradient(
180deg,
transparent 0%,
#000 14%,
#000 86%,
transparent 100%
);
}
.momentos::after {
/* veil dark adicional para reforce la profundidad */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(5, 8, 16, 0.55) 0%,
rgba(5, 8, 16, 0.25) 50%,
rgba(5, 8, 16, 0.65) 100%
);
pointer-events: none;
-webkit-mask-image: linear-gradient(
180deg,
transparent 0%,
transparent 8%,
#000 30%,
#000 70%,
transparent 92%,
transparent 100%
);
mask-image: linear-gradient(
180deg,
transparent 0%,
transparent 8%,
#000 30%,
#000 70%,
transparent 92%,
transparent 100%
);
}
.momentos > * {
position: relative;
z-index: 2;
}
.momentos__list {
margin-top: 4rem;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.momento {
display: grid;
grid-template-columns: 160px 160px 1fr;
gap: 30px;
align-items: center;
padding: 28px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.momento__day {
font-family: var(--sans);
font-weight: 500;
font-size: 0.74rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.momento__date {
font-family: var(--serif);
font-size: 1.4rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--white);
}
.momento__title {
font-family: var(--serif);
font-size: 1.1rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--paper);
}
.momento__title em {
color: var(--white);
font-style: italic;
letter-spacing: 0.08em;
}
/* =========================================================
BONOS | mockups reales de la brochure
========================================================= */
.bonos {
background: var(--wine);
position: relative;
}
.bonos__grid {
margin-top: 5rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.bono {
position: relative;
display: flex;
flex-direction: column;
background: color-mix(in oklab, var(--ink) 85%, transparent);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
overflow: hidden;
cursor: pointer;
backdrop-filter: blur(8px) saturate(120%);
transition:
transform 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}
/* Overlay dark uniforme sobre la image para nivelar tarjetas con
images de tones muy distintos (ej. documentos blancos vs. fotos darks) */
.bono::before {
content: "";
position: absolute;
inset: 0;
background: rgba(5, 10, 20, 0.28);
pointer-events: none;
z-index: 1;
}
.bono:hover {
transform: translateY(-4px);
border-color: color-mix(in oklab, var(--accent) 60%, transparent);
box-shadow:
0 24px 48px -24px rgba(0, 0, 0, 0.8),
0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent);
}
.bono:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
}
.bono__visual {
display: block;
width: 100%;
aspect-ratio: 3/4;
background: var(--ink);
object-fit: cover;
object-position: center top;
transition: transform 0.8s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.bono:hover .bono__visual {
transform: scale(1.03);
}
.bono__caption {
padding: 18px 20px 22px;
text-align: center;
background: var(--ink);
position: relative;
z-index: 2;
}
.bono__label {
font-family: var(--sans);
font-weight: 500;
font-size: 0.66rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.3rem;
transition: color 1.2s ease;
}
.bono__name {
font-family: var(--serif);
font-size: 1.05rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--white);
/* Reservamos altura de 2 l\u00edneas reales (line-height heredado) para
que todos los cards de la fila tengan la misma altura final y no
quede hueco entre la image y el caption en cards de una sola l\u00ednea. */
min-height: 2lh;
display: flex;
align-items: center;
justify-content: center;
}
/* Variant para first names largos que no caben con el tracking est\u00e1ndar */
.bono__name--tight {
letter-spacing: 0.1em;
white-space: nowrap;
}
.bono__hint {
display: block;
margin-top: 0.6rem;
font-family: var(--sans);
font-size: 0.62rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
}
/* =========================================================
BONO MODAL | popup con vista ampliada de la brochure
========================================================= */
.bono-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 5vh 4vw;
background: rgba(5, 2, 4, 0.88);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.4s ease,
visibility 0s linear 0.4s;
}
.bono-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
transition:
opacity 0.4s ease,
visibility 0s linear 0s;
}
.bono-modal__dialog {
position: relative;
max-width: min(620px, 90vw);
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
transform: translateY(24px) scale(0.97);
transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.bono-modal.is-open .bono-modal__dialog {
transform: translateY(0) scale(1);
}
.bono-modal__image {
display: block;
max-width: 100%;
max-height: 78vh;
width: auto;
height: auto;
object-fit: contain;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
.bono-modal__caption {
font-family: var(--serif);
font-size: 0.95rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--paper);
text-align: center;
}
.bono-modal__caption b {
color: var(--sky);
font-weight: 500;
transition: color 1.2s ease;
}
.bono-modal__close {
position: absolute;
top: -44px;
right: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
color: var(--paper);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition:
background 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
@media (hover: hover) {
.bono-modal__close:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--ink);
transform: rotate(90deg);
}
}
@media (max-width: 720px) {
.bono-modal {
padding: 16px;
align-items: flex-start;
/* Blocka scroll touch insidel modal */
overscroll-behavior: contain;
-webkit-overflow-scrolling: auto;
}
.bono-modal__dialog {
max-width: 100%;
max-height: calc(100vh - 32px);
width: 100%;
margin-top: 56px;
gap: 14px;
}
.bono-modal__image {
max-height: calc(100vh - 200px);
width: 100%;
}
.bono-modal__close {
/* Dentro del dialog, esquina superior derecha de la propia image,
always visible and at a tap-friendly size (44x44) */
top: 10px;
right: 10px;
width: 44px;
height: 44px;
font-size: 1.5rem;
background: rgba(10, 10, 12, 0.78);
border-color: rgba(255, 255, 255, 0.5);
color: var(--white);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transform: none;
}
/* Anula cualquier hover heredado (el tap deja hover sticky en iOS) */
.bono-modal__close:hover,
.bono-modal__close:focus {
background: rgba(10, 10, 12, 0.78);
border-color: rgba(255, 255, 255, 0.5);
color: var(--white);
transform: none;
}
.bono-modal__close:active {
background: var(--accent);
border-color: var(--accent);
color: var(--ink);
}
.bono-modal__caption {
font-size: 0.8rem;
padding: 0 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.bono-modal,
.bono-modal__dialog,
.bono-modal__close {
transition: none;
}
}
/* =========================================================
INVESTMENT (pricing) | now in navy blue with constellation,
mismo look-and-feel que la antigua banda Momentos
========================================================= */
.inversion {
background: var(--navy);
text-align: center;
position: relative;
overflow: hidden;
}
.inversion::before {
content: "";
position: absolute;
inset: 0;
background: url("https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/c3ffd6e5-7749-42e2-8114-67e37003bd57.jpg")
center/cover no-repeat;
opacity: 0.45;
mix-blend-mode: multiply;
filter: brightness(0.5) contrast(1.05);
pointer-events: none;
-webkit-mask-image: linear-gradient(
180deg,
transparent 0%,
transparent 6%,
#000 28%,
#000 72%,
transparent 94%,
transparent 100%
);
mask-image: linear-gradient(
180deg,
transparent 0%,
transparent 6%,
#000 28%,
#000 72%,
transparent 94%,
transparent 100%
);
}
.inversion::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(5, 8, 16, 0.55) 0%,
rgba(5, 8, 16, 0.25) 50%,
rgba(5, 8, 16, 0.65) 100%
);
pointer-events: none;
-webkit-mask-image: linear-gradient(
180deg,
transparent 0%,
transparent 8%,
#000 30%,
#000 70%,
transparent 92%,
transparent 100%
);
mask-image: linear-gradient(
180deg,
transparent 0%,
transparent 8%,
#000 30%,
#000 70%,
transparent 92%,
transparent 100%
);
}
.inversion > * {
position: relative;
z-index: 2;
}
.inversion .silver {
color: var(--white);
}
.inversion .eyebrow {
color: rgba(255, 255, 255, 0.78);
}
.inversion .lede {
color: rgba(255, 255, 255, 0.82);
}
/* Bonuses inside the Investment block: same navy palette */
.inversion .bono {
background: rgba(8, 16, 28, 0.15);
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(14px) saturate(150%) brightness(115%);
-webkit-backdrop-filter: blur(14px) saturate(150%) brightness(115%);
}
.inversion .bono:hover {
border-color: rgba(255, 255, 255, 0.32);
box-shadow:
0 24px 48px -24px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.18);
}
.inversion .bono:focus-visible {
border-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 0 3px rgba(157, 196, 224, 0.25);
}
.inversion .bono__visual {
background: rgba(8, 16, 28, 0.55);
}
.inversion .bono__caption {
background: rgba(8, 16, 28, 0.55);
}
.inversion .bono__caption::before {
background: rgba(255, 255, 255, 0.4);
}
.inversion .bono:hover .bono__caption::before {
background: var(--sky);
}
.inversion .bono__label {
color: var(--sky);
}
.inversion .bono__hint {
color: rgba(255, 255, 255, 0.5);
}
/* Main CTA inside Investment: navy/sky tone */
.inversion .cta--terra {
background: var(--sky);
color: var(--navy-deep);
border-color: var(--sky);
box-shadow:
0 10px 30px -12px rgba(157, 196, 224, 0.6),
inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.inversion .cta--terra:hover {
background: #bfd8ec;
border-color: #bfd8ec;
color: var(--navy-deep);
box-shadow:
0 18px 44px -14px rgba(157, 196, 224, 0.85),
0 0 0 6px rgba(157, 196, 224, 0.2);
}
.precio-card {
margin: 3rem auto 0;
max-width: 580px;
padding: clamp(40px, 5vw, 56px) clamp(28px, 4vw, 52px);
background: rgba(8, 16, 28, 0.55);
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 4px;
transition:
background 1.2s ease,
border-color 1.2s ease;
text-align: center;
}
.precio-card .cta-row {
margin-top: 1.8rem;
}
.precio__breakdown {
text-align: left;
margin: 0 auto 1.8rem;
max-width: 380px;
padding: 0;
list-style: none;
font-family: var(--sans);
font-size: 0.92rem;
color: var(--paper-2);
}
.precio__breakdown li {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
}
.precio__breakdown li span:last-child {
color: var(--white);
font-weight: 500;
}
.precio__headline {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 1.2rem 0 1.6rem;
position: relative;
}
.precio__headline::before,
.precio__headline::after {
content: "";
flex: 0 0 48px;
height: 1px;
background: rgba(255, 255, 255, 0.18);
}
.precio__strike {
font-family: var(--serif);
font-size: 1.05rem;
letter-spacing: 0.16em;
color: rgba(255, 255, 255, 0.45);
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.precio__split {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: clamp(18px, 3vw, 40px);
margin: 0.4rem auto 1.2rem;
max-width: 460px;
}
.precio__col {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55rem;
}
.precio__amount {
font-family: var(--serif);
font-size: clamp(2.2rem, 4.6vw, 3.2rem);
letter-spacing: 0.05em;
color: var(--white);
line-height: 1;
}
.precio__cap {
font-family: var(--sans);
font-weight: 500;
font-size: 0.62rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
}
.precio__divider {
width: 1px;
align-self: stretch;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(255, 255, 255, 0.35) 22%,
rgba(255, 255, 255, 0.35) 78%,
transparent 100%
);
}
.precio__iva {
margin-top: 6px;
display: block;
font-size: 0.58rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
font-weight: 400;
}
@media (max-width: 520px) {
.precio__split {
grid-template-columns: 1fr;
gap: 18px;
}
.precio__divider {
height: 1px;
width: 60%;
justify-self: center;
background: linear-gradient(
to right,
transparent,
rgba(255, 255, 255, 0.35),
transparent
);
}
}
.precio__providers {
margin-top: 1.6rem;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 18px;
}
.precio__providers img {
display: block;
height: 20px;
width: auto;
opacity: 0.78;
object-fit: contain;
}
.precio__providers img[alt="seQura"] {
height: 22px;
}
.precio__providers-sep {
width: 1px;
height: 18px;
background: rgba(255, 255, 255, 0.22);
display: inline-block;
}
/* Footer wordmark La Boutique de Mentores (typographic lockup) */
.site-footer__wordmark {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-family: var(--serif);
text-transform: uppercase;
letter-spacing: 0.32em;
color: rgba(255, 255, 255, 0.92);
line-height: 1.05;
}
.site-footer__wordmark-line {
font-size: 0.78rem;
font-weight: 400;
}
.site-footer__wordmark-line:first-child {
font-size: 0.92rem;
font-weight: 500;
}
.site-footer__brand-mark:hover .site-footer__wordmark {
color: var(--white);
}
/* =========================================================
AUTOR
========================================================= */
.autor {
background: var(--wine);
}
.autor .editorial__photo {
aspect-ratio: 4/5;
}
.autor__body p {
font-size: 0.92rem;
line-height: 1.65;
}
.autor__body p + p {
margin-top: 1rem;
}
/* Hyperlink inline en cuerpo editorial: blanco + bold + underline accent.
Inspired by the treatment of the "Certificación" strong in the next paragraph. */
.autor__body a.link-inline,
.link-inline {
color: var(--white);
text-decoration: underline;
text-decoration-color: color-mix(in oklab, var(--accent) 70%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition:
text-decoration-color 0.25s ease,
color 0.25s ease;
}
.autor__body a.link-inline:hover,
.link-inline:hover {
text-decoration-color: var(--accent);
color: #fff;
}
/* Hyperlink inline en cuerpo editorial: blanco + bold + underline accent.
Inspired by the treatment of the "Certificación" strong in the next paragraph. */
.autor__body a.link-inline,
.link-inline {
color: var(--white);
text-decoration: underline;
text-decoration-color: color-mix(in oklab, var(--accent) 70%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition:
text-decoration-color 0.25s ease,
color 0.25s ease;
}
.autor__body a.link-inline:hover,
.link-inline:hover {
text-decoration-color: var(--accent);
color: #fff;
}
/* =========================================================
CIERRE
========================================================= */
#acceso {
content-visibility: auto;
contain-intrinsic-size: 1px 1200px;
}
.cierre {
position: relative;
overflow: hidden;
text-align: center;
padding-block: clamp(70px, 8vw, 110px);
background: #000;
}
.cierre::before {
content: "";
position: absolute;
inset: 0;
background: url("https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/a83798db-29a9-41a4-bf85-cf23b3f09569.jpg")
center/cover no-repeat;
opacity: 0.28;
-webkit-mask-image: linear-gradient(
180deg,
transparent 0%,
#000 14%,
#000 86%,
transparent 100%
);
mask-image: linear-gradient(
180deg,
transparent 0%,
#000 14%,
#000 86%,
transparent 100%
);
}
.cierre::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 70% 55% at 50% 50%,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.72) 70%,
rgba(0, 0, 0, 0.88) 100%
);
pointer-events: none;
}
.cierre > * {
position: relative;
z-index: 2;
}
.cierre__symbol {
display: block;
margin: 0 auto 2.4rem;
height: 64px;
width: auto;
opacity: 0.92;
}
.cierre__claim {
margin: 0 auto;
max-width: none;
font-family: var(--sans);
font-weight: 400;
color: rgba(255, 255, 255, 0.9);
}
.cierre__line {
display: block;
font-size: clamp(0.82rem, 1.1vw, 0.96rem);
letter-spacing: 0.22em;
line-height: 2;
text-transform: uppercase;
}
.cierre__unico {
display: block;
margin-top: 0.4rem;
font-family: var(--sans);
font-weight: 500;
font-size: clamp(0.86rem, 1.15vw, 1rem);
letter-spacing: 0.22em;
line-height: 2;
text-transform: uppercase;
color: var(--white);
}
.cierre__unico em {
font-style: normal;
font-weight: 500;
color: var(--white);
position: relative;
padding: 0 0.08em 0.22em;
background-image: linear-gradient(
to right,
transparent,
var(--accent) 18%,
var(--accent) 82%,
transparent
);
background-repeat: no-repeat;
background-size: 100% 1px;
background-position: 0 100%;
}
.cierre .cta-row {
margin-top: 3rem;
}
/* =========================================================
FAQ
========================================================= */
#faq {
content-visibility: auto;
contain-intrinsic-size: 1px 1200px;
}
.faq {
background: #000;
}
.faq__list {
margin-top: 3.5rem;
border-top: 1px solid var(--wine-line);
}
.faq__item {
border-bottom: 1px solid var(--wine-line);
}
.faq__item summary {
list-style: none;
cursor: pointer;
padding: 26px 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
font-family: var(--serif);
font-size: 1.05rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--white);
transition: color 0.25s ease;
}
.faq__item summary:hover {
color: var(--accent);
}
.faq__item summary::-webkit-details-marker {
display: none;
}
.faq__item summary::after {
content: "+";
color: var(--paper-2);
font-family: var(--serif);
font-size: 1.6rem;
font-weight: 300;
line-height: 1;
display: inline-block;
transition:
transform 0.45s cubic-bezier(0.65, 0.05, 0.36, 1),
color 0.25s ease;
transform-origin: center;
}
.faq__item[open] summary::after {
transform: rotate(45deg);
color: var(--accent);
}
/* nota: el estado .is-open lo aplica JS para poder animate height */
/* Animation de despliegue: el panel anima su altura via JS
(height 0 ↔ scrollHeight) to guarantee a cross-browser transition. */
.faq__panel {
overflow: hidden;
height: 0;
transition: height 0.55s cubic-bezier(0.65, 0.05, 0.36, 1);
will-change: height;
}
.faq__item.is-open .faq__panel {
/* height set inline by JS */
}
.faq__panel > .faq__answer {
opacity: 0;
transform: translateY(-12px) scale(0.985);
transition:
opacity 0.45s ease 0.08s,
transform 0.55s cubic-bezier(0.65, 0.05, 0.36, 1) 0.08s;
}
.faq__item.is-open .faq__panel > .faq__answer {
opacity: 1;
transform: translateY(0) scale(1);
}
.faq__answer {
padding: 0 0 26px;
color: var(--paper-2);
max-width: 62ch;
margin-inline: auto;
text-align: justify;
text-align-last: center;
hyphens: auto;
font-size: 0.98rem;
line-height: 1.7;
position: relative;
}
.faq__answer::before {
content: "";
position: absolute;
left: 0;
top: -4px;
width: 24px;
height: 1px;
background: var(--accent);
transform-origin: left center;
transform: scaleX(0);
transition: transform 0.55s cubic-bezier(0.65, 0.05, 0.36, 1) 0.12s;
}
.faq__item.is-open .faq__answer::before {
transform: scaleX(1);
}
.faq__item summary {
transition:
color 0.25s ease,
padding-left 0.35s cubic-bezier(0.65, 0.05, 0.36, 1),
background 0.35s ease;
}
.faq__item.is-open summary {
padding-left: 14px;
color: var(--accent);
}
.faq__item.is-open summary::after {
transform: rotate(45deg);
color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
.faq__panel,
.faq__panel > .faq__answer,
.faq__item summary::after,
.faq__answer::before,
.faq__item summary {
transition: none;
}
}
/* =========================================================
FOOTER | hero-like atmosphere
========================================================= */
.site-footer {
position: relative;
background: #000;
padding: clamp(40px, 5.5vw, 68px) 0 clamp(22px, 2.4vw, 36px);
overflow: hidden;
isolation: isolate;
}
/* Layer de stars tipo hero */
.site-footer__stars {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(
1px 1px at 12% 18%,
rgba(244, 233, 220, 0.85) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 82% 12%,
rgba(244, 233, 220, 0.7) 50%,
transparent 100%
),
radial-gradient(
1.4px 1.4px at 26% 76%,
rgba(244, 233, 220, 0.95) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 60% 32%,
rgba(244, 233, 220, 0.55) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 90% 58%,
rgba(244, 233, 220, 0.65) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 8% 50%,
rgba(244, 233, 220, 0.55) 50%,
transparent 100%
),
radial-gradient(
1.2px 1.2px at 44% 8%,
rgba(244, 233, 220, 0.75) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 70% 88%,
rgba(244, 233, 220, 0.6) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 36% 44%,
rgba(212, 132, 95, 0.45) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 18% 92%,
rgba(244, 233, 220, 0.5) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 96% 30%,
rgba(244, 233, 220, 0.55) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 52% 62%,
rgba(244, 233, 220, 0.45) 50%,
transparent 100%
),
radial-gradient(
1.3px 1.3px at 76% 72%,
rgba(212, 132, 95, 0.55) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 4% 28%,
rgba(244, 233, 220, 0.6) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 32% 22%,
rgba(244, 233, 220, 0.5) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 64% 18%,
rgba(244, 233, 220, 0.5) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 88% 84%,
rgba(244, 233, 220, 0.55) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 22% 36%,
rgba(244, 233, 220, 0.4) 50%,
transparent 100%
),
radial-gradient(
1px 1px at 56% 80%,
rgba(244, 233, 220, 0.5) 50%,
transparent 100%
),
radial-gradient(
1.5px 1.5px at 14% 64%,
rgba(244, 233, 220, 0.85) 50%,
transparent 100%
);
/* Atenuar las stars justo low los logos/text central, pero mantenerlas visibles en los flancos */
-webkit-mask: radial-gradient(
ellipse 32% 55% at 50% 50%,
rgba(0, 0, 0, 0.3) 0%,
#000 70%
);
mask: radial-gradient(
ellipse 32% 55% at 50% 50%,
rgba(0, 0, 0, 0.3) 0%,
#000 70%
);
opacity: 0.85;
animation: starsTwinkle 6s ease-in-out infinite alternate;
}
/* Layers extra de stars \u201cdestello\u201d para el footer:
appearsn y desappearsn con un shine sutil, como respiraciones del cielo. */
.site-footer__stars::before,
.site-footer__stars::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
-webkit-mask: inherit;
mask: inherit;
}
.site-footer__stars::before {
background-image:
radial-gradient(1.6px 1.6px at 14% 26%, #f4e9dc 50%, transparent 100%),
radial-gradient(1.4px 1.4px at 80% 18%, #f4e9dc 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 38% 70%, #f4e9dc 50%, transparent 100%),
radial-gradient(
1.2px 1.2px at 92% 52%,
rgba(212, 132, 95, 0.95) 50%,
transparent 100%
),
radial-gradient(1.4px 1.4px at 8% 80%, #f4e9dc 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 60% 14%, #f4e9dc 50%, transparent 100%);
opacity: 0;
animation: starsBlink 8s ease-in-out infinite 1.2s;
filter: drop-shadow(0 0 2px rgba(244, 233, 220, 0.5));
}
.site-footer__stars::after {
background-image:
radial-gradient(1.4px 1.4px at 26% 12%, #f4e9dc 50%, transparent 100%),
radial-gradient(
1.6px 1.6px at 72% 62%,
rgba(212, 132, 95, 0.9) 50%,
transparent 100%
),
radial-gradient(1.2px 1.2px at 50% 30%, #f4e9dc 50%, transparent 100%),
radial-gradient(1.5px 1.5px at 86% 84%, #f4e9dc 50%, transparent 100%),
radial-gradient(1.3px 1.3px at 12% 56%, #f4e9dc 50%, transparent 100%),
radial-gradient(1.4px 1.4px at 34% 90%, #f4e9dc 50%, transparent 100%);
opacity: 0;
animation: starsBlink 11s ease-in-out infinite 3.5s;
}
/* Subtle hero-like veil — warm brown like the rest of the piece */
.site-footer::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(
ellipse 32% 30% at 50% 50%,
rgba(80, 32, 20, 0.18) 0%,
transparent 70%
),
radial-gradient(
ellipse 120% 60% at 50% 100%,
rgba(26, 5, 8, 0.55) 0%,
transparent 60%
);
}
/* Granulado tenue */
.site-footer::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image:
radial-gradient(
circle at 20% 20%,
rgba(244, 233, 220, 0.04) 0,
transparent 1px
),
radial-gradient(
circle at 70% 60%,
rgba(244, 233, 220, 0.03) 0,
transparent 1px
),
radial-gradient(
circle at 40% 80%,
rgba(244, 233, 220, 0.03) 0,
transparent 1px
);
background-size:
3px 3px,
5px 5px,
4px 4px;
opacity: 0.5;
}
.site-footer > * {
position: relative;
z-index: 2;
}
.site-footer > .site-footer__stars {
position: absolute;
z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
.site-footer__stars {
animation: none;
}
}
.site-footer__top {
display: flex;
align-items: center;
justify-content: center;
gap: 36px;
flex-wrap: wrap;
}
.site-footer__brand-mark {
display: flex;
align-items: center;
}
.site-footer__brand-mark img {
display: block;
height: 30px;
width: auto;
opacity: 0.5;
filter: brightness(0) invert(1);
transition: opacity 0.3s ease;
}
.site-footer__brand-mark img:hover {
opacity: 0.8;
}
.site-footer__signature {
display: block;
height: 30px;
width: auto;
opacity: 0.5;
filter: brightness(0) invert(1);
transition: opacity 0.3s ease;
}
.site-footer__signature:hover {
opacity: 0.8;
}
/* Block central | rights centrados verticalmente entre logos e Innki */
.site-footer__center {
margin-top: clamp(16px, 2vw, 24px);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(16px, 2vw, 24px);
}
.site-footer__legal {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font-size: 0.62rem;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
}
.site-footer__legal a {
color: rgba(255, 255, 255, 0.45);
transition: color 0.25s ease;
}
.site-footer__legal a:hover {
color: #fff;
}
.site-footer__sites {
font-size: 0.66rem;
letter-spacing: 0.24em;
}
.site-footer__sites a {
color: rgba(255, 255, 255, 0.6);
}
.site-footer__sites a:hover {
color: var(--accent);
}
@media (max-width: 640px) {
.site-footer__top {
/* Mantener los logos de La Boutique y David Sobrino en la misma line
en mobile, con menos gap pero sin saltar a columna. */
flex-direction: row;
gap: 24px;
}
}
/* Credit row | just below the Boutique and David Sobrino logos */
.site-footer__credit-row {
margin-top: clamp(20px, 2.5vw, 28px);
display: flex;
justify-content: center;
}
/* Innki Tech credit | pill with full logo */
.site-footer__rule {
display: none;
}
.site-footer__credit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
margin-top: 0;
padding: 9px 18px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
background: transparent;
transition:
opacity 0.35s ease,
transform 0.35s ease,
border-color 0.35s ease,
background 0.35s ease;
opacity: 0.5;
}
.site-footer__credit:hover,
.site-footer__credit:focus-visible {
opacity: 0.8;
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.04);
outline: none;
}
.site-footer__credit-label {
font-family: var(--sans);
font-weight: 300;
font-size: 0.55rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
}
.site-footer__credit-sep {
display: none;
}
.site-footer__credit-logo {
display: block;
height: 22px;
width: auto;
filter: brightness(0) invert(1);
transition: transform 0.55s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.site-footer__credit-stage {
position: relative;
display: inline-block;
height: 22px;
min-width: 88px;
}
.site-footer__credit-stage .site-footer__credit-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.92);
opacity: 0;
transition:
opacity 0.9s cubic-bezier(0.65, 0.05, 0.36, 1),
transform 0.9s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.site-footer__credit-stage .site-footer__credit-logo.is-active {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.site-footer__credit:hover .site-footer__credit-stage .is-active {
transform: translate(-50%, -50%) scale(1.04);
}
/* =========================================================
HERO | CTA stack (programa belowl primario)
========================================================= */
.hero .cta-row {
flex-direction: column;
align-items: center;
gap: 14px;
}
.hero .cta-row .cta--ghost {
background: transparent;
border: none;
padding: 6px 12px;
font-size: 0.74rem;
letter-spacing: 0.34em;
color: rgba(244, 233, 220, 0.78);
position: relative;
transition:
color 0.3s ease,
letter-spacing 0.3s ease;
}
.hero .cta-row .cta--ghost::after {
content: "";
position: absolute;
left: 50%;
bottom: -2px;
height: 1px;
width: 32px;
background: color-mix(in oklab, var(--accent) 70%, transparent);
transform: translateX(-50%) scaleX(0.5);
transform-origin: center;
transition:
transform 0.35s ease,
background 1.2s ease,
width 0.35s ease;
}
.hero .cta-row .cta--ghost:hover {
color: var(--white);
letter-spacing: 0.4em;
}
.hero .cta-row .cta--ghost:hover::after {
transform: translateX(-50%) scaleX(1);
width: 56px;
}
/* =========================================================
BACK TO TOP | arrow sutil flotante
========================================================= */
.back-to-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 90;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(10, 3, 6, 0.55);
border: 1px solid
color-mix(in oklab, var(--accent) 35%, rgba(255, 255, 255, 0.12));
color: var(--paper);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition:
opacity 0.35s ease,
transform 0.35s ease,
visibility 0s linear 0.35s,
background 0.25s ease,
border-color 1.2s ease,
color 0.25s ease;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
opacity 0.35s ease,
transform 0.35s ease,
visibility 0s linear 0s,
background 0.25s ease,
border-color 1.2s ease,
color 0.25s ease;
}
.back-to-top:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--ink);
}
.back-to-top .icon {
width: 14px;
height: 14px;
display: block;
transition: transform 0.35s ease;
}
.back-to-top:hover .icon {
transform: translateY(-2px);
}
@media (max-width: 720px) {
.back-to-top {
right: 16px;
bottom: 16px;
width: 38px;
height: 38px;
}
}
@media (prefers-reduced-motion: reduce) {
.back-to-top {
transition:
opacity 0.2s ease,
visibility 0s;
}
}
/* =========================================================
NARRATIPOS RADAR | concentric octagon with axes
(sustituye al grid de 8 llaves: una sola llave al center)
========================================================= */
.narra-radar {
position: relative;
max-width: 480px;
margin: 3.5rem auto 0;
aspect-ratio: 1/1;
}
.narra-radar svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.narra-radar__ring,
.narra-radar__axis {
fill: none;
stroke: rgba(244, 233, 220, 0.14);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.narra-radar__ring--outer {
stroke: color-mix(in oklab, var(--accent) 55%, rgba(244, 233, 220, 0.25));
stroke-width: 1.4;
transition: stroke 1.2s ease;
}
.narra-radar__dot {
fill: rgba(244, 233, 220, 0.28);
}
.narra-radar__sector {
fill: var(--c);
opacity: 0.1;
transition: opacity 0.35s ease;
}
.narra-radar__vertex:hover .narra-radar__sector {
opacity: 0.22;
}
.narra-radar__label {
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
fill: var(--c);
pointer-events: none;
}
.narra-radar__center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 18%;
height: auto;
filter: drop-shadow(
0 0 18px color-mix(in oklab, var(--accent) 60%, transparent)
);
transition:
filter 1.2s ease,
transform 0.6s ease;
pointer-events: none;
opacity: 0.95;
}
.narra-radar:hover .narra-radar__center {
transform: translate(-50%, -50%) scale(1.04);
}
.narra-radar__caption {
margin-top: 1.4rem;
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: 0.85rem;
letter-spacing: 0.04em;
color: var(--paper-2);
}
@media (max-width: 720px) {
.narra-radar {
max-width: 92vw;
}
.narra-radar__label {
font-size: 9px;
letter-spacing: 0.2em;
}
}
/* =========================================================
Animaciones sutiles
========================================================= */
.fade-up {
opacity: 0;
transform: translateY(36px);
transition:
opacity 0.95s cubic-bezier(0.2, 0.7, 0.2, 1),
transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: opacity, transform;
}
.fade-up.in {
opacity: 1;
transform: none;
will-change: auto;
}
.fade-up.delay-1 {
transition-delay: 0.12s;
}
.fade-up.delay-2 {
transition-delay: 0.22s;
}
.fade-up.delay-3 {
transition-delay: 0.32s;
}
.modulo,
.bono {
transition:
background 0.35s ease,
transform 0.45s ease,
border-color 0.35s ease;
}
.modulo:hover {
transform: translateY(-2px);
}
@media (max-width: 720px) {
/* On mobile we trim duration and scroll a bit
so the animation feels agile without losing presence. */
.fade-up {
transform: translateY(28px);
transition:
opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fade-up.delay-1 {
transition-delay: 0.06s;
}
.fade-up.delay-2 {
transition-delay: 0.12s;
}
.fade-up.delay-3 {
transition-delay: 0.18s;
}
}
@media (prefers-reduced-motion: reduce) {
.fade-up {
opacity: 1;
transform: none;
transition: none;
}
.hero__brand {
animation: none;
}
}
/* =========================================================
Responsive
========================================================= */
@media (max-width: 900px) {
.editorial {
grid-template-columns: 1fr;
}
/* En mobile la foto siempre va al final del bloque editorial,
independientemente del orden DOM (en "qu\u00e9 es" la foto va primero
en HTML para alternar el layout en desktop). */
.editorial__photo {
order: 2;
}
.modulos {
grid-template-columns: 1fr;
gap: 18px;
}
.bonos__grid {
grid-template-columns: repeat(2, 1fr);
}
.narratipos__grid {
grid-template-columns: repeat(2, 1fr);
}
.momento {
grid-template-columns: 1fr;
gap: 6px;
text-align: left;
}
.site-header nav {
display: none;
}
.nav-toggle {
display: block;
}
/* Editorial photos: more natural aspect ratio on mobile */
.editorial__photo {
aspect-ratio: 4/5;
}
.autor .editorial__photo {
aspect-ratio: 4/5;
}
/* Editorial: center headings and give text more breathing room */
.editorial .h-title,
.editorial p.eyebrow,
.editorial .lede {
text-align: center;
}
.editorial .rule {
justify-content: center;
}
.editorial p {
font-size: 1rem;
line-height: 1.7;
}
/* Modules: menos padding interior forzado */
.modulo {
padding: 36px 24px 36px 40px;
}
/* Investment: prices vertically stacked for better readability */
.precio__split {
flex-direction: column;
gap: 18px;
}
.precio__divider {
width: 40%;
height: 1px;
margin-inline: auto;
}
.precio-card {
padding: 36px 22px;
}
/* Bonuss: force 1 columna so that no se aprieten */
.bonos__grid {
grid-template-columns: 1fr;
}
/* Hero mobile */
.hero {
height: 100vh;
max-height: 100vh;
}
.hero__inner {
padding: 80px 18px 30px;
gap: 0.55rem;
}
.hero__brand {
gap: 10px;
}
.hero__key {
height: clamp(140px, 28vh, 220px);
}
.hero__wordmark {
height: clamp(28px, 5.5vh, 48px);
max-width: 84vw;
}
.hero__meta {
font-size: 0.74rem;
}
.hero .cta-row {
margin-top: 0.8rem;
gap: 10px;
}
.hero .cta {
padding: 14px 22px;
font-size: 0.66rem;
}
}
/* Logo La Boutique de Mentores en footer (paridad visual con firma-david) */
.site-footer__brand-mark {
display: inline-flex;
align-items: center;
}
.site-footer__brand-mark img {
height: 36px;
width: auto;
opacity: 0.5;
filter: none;
transition: opacity 0.3s ease;
}
.site-footer__brand-mark img:hover {
opacity: 0.8;
}
/* =========================================================
LEGAL PAGES (Privacy / Cookies policy)
========================================================= */
.legal {
background: var(--ink);
padding-block: clamp(64px, 8vw, 120px);
}
.legal .col-narrow {
width: min(760px, 92vw);
}
.legal__head {
text-align: center;
margin-bottom: clamp(40px, 5vw, 64px);
}
.legal__updated {
display: block;
margin-top: 1rem;
font-family: var(--sans);
font-weight: 300;
font-size: 0.7rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.legal__body {
font-family: var(--sans);
font-weight: 300;
font-size: 1rem;
line-height: 1.8;
color: var(--paper-2);
}
.legal__body h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(1.2rem, 2vw, 1.55rem);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--white);
margin: 3rem 0 1rem;
}
.legal__body h2:first-of-type {
margin-top: 0;
}
.legal__body h3 {
font-family: var(--sans);
font-weight: 500;
font-size: 0.92rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--paper);
margin: 2rem 0 0.6rem;
}
.legal__body p {
margin: 0 0 1rem;
text-align: justify;
text-justify: inter-word;
hyphens: auto;
}
.legal__body ul {
list-style: none;
padding: 0;
margin: 0 0 1.4rem;
}
.legal__body ul li {
position: relative;
padding-left: 1.4rem;
margin-bottom: 0.5rem;
}
.legal__body ul li::before {
content: "·";
position: absolute;
left: 0.4rem;
top: 0;
color: var(--accent);
font-weight: 600;
}
.legal__body a {
color: var(--accent);
border-bottom: 1px solid rgba(212, 132, 95, 0.3);
transition: border-color 0.3s ease;
}
.legal__body a:hover {
border-bottom-color: var(--accent);
}
.legal__body strong {
color: var(--white);
font-weight: 500;
}
.legal__body em {
color: var(--paper);
font-style: italic;
}
.legal__contact {
margin-top: 2rem;
padding: 1.6rem 1.8rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--line);
border-radius: 4px;
}
.legal__contact p {
margin: 0.3rem 0;
text-align: left;
hyphens: none;
}
.legal__back {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-top: 3rem;
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--paper-2);
border-bottom: none !important;
}
.legal__back:hover {
color: var(--accent);
}
/* ── Static logo on legal pages ── */
.legal__logo {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 40px 0 32px;
text-decoration: none;
}
.legal__logo img {
width: 44px;
height: auto;
opacity: 0.9;
}
.legal__logo span {
font-family: var(--serif);
font-size: 1.35rem;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--paper);
text-transform: uppercase;
}
/* ─────────────────────────────────────────────────────────────────────────
.lp — Generic layout for simple landing pages
Estructura paralela a .legal, reutilizable en cualquier landing
───────────────────────────────────────────────────────────────────────── */
.lp {
background: transparent;
flex: 1;
padding-block: clamp(64px, 8vw, 120px);
}
.lp .col-narrow {
width: min(760px, 92vw);
}
.lp__logo {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 40px 0 32px;
text-decoration: none;
}
.lp__logo img {
width: 44px;
height: auto;
opacity: 0.9;
}
.lp__logo span {
font-family: var(--serif);
font-size: 1.35rem;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--paper);
text-transform: uppercase;
}
.lp__head {
text-align: center;
margin-bottom: clamp(40px, 5vw, 64px);
}
.lp__body {
font-family: var(--sans);
font-weight: 300;
font-size: 1rem;
line-height: 1.8;
color: var(--paper-2);
}
/* Tweaks mobile — usa !important para vencer estilos inline ad-hoc */
@media (max-width: 640px) {
.lp {
padding-block: clamp(40px, 10vw, 64px) !important;
}
.lp .col-narrow {
width: min(760px, 94vw);
}
.lp__head .h-title {
font-size: 1.65rem !important;
line-height: 1.2 !important;
}
.lp__head p:not(.eyebrow) {
font-size: 0.95rem !important;
line-height: 1.6 !important;
}
.lp__head p br {
display: none;
}
.lp__body .form-section,
.lp__body section.form-section {
padding: 1.2rem 0.75rem !important;
}
.lp__body .form-section .h-title {
font-size: 1.25rem !important;
}
.lp__body .form-header {
margin-bottom: 1.25rem !important;
}
.lp__body .form-header p {
font-size: 0.92rem !important;
}
}
/* ===== landing | overrides ===== */
/* Landing-specific styles for la-certificacion (Narratipos). Empty by default. */
Paste into the GHL page's Custom JS field. No vars.js needed — GHL already substituted the tokens before the script ran.
/* ===== brand | vars engine ===== */
(function () {
const RE = /\{\{custom_values\.([a-z_]+)\}\}/g;
const NOW_YEAR = new Date().getFullYear();
const RE_NOW_YEAR = /\{\{now\.year\}\}/g;
function replacer(VALUES) {
return (str) =>
str
.replace(RE, (_, key) =>
Object.prototype.hasOwnProperty.call(VALUES, key) ? VALUES[key] : _,
)
.replace(RE_NOW_YEAR, NOW_YEAR);
}
/* ── Recorre el DOM sustituyendo en nodos de texto y atributos ─────────── */
function walk(node, replace) {
if (node.nodeType === Node.TEXT_NODE) {
const next = replace(node.nodeValue);
if (next !== node.nodeValue) node.nodeValue = next;
return;
}
if (node.nodeType === Node.ELEMENT_NODE) {
const tag = node.tagName;
if (tag === "SCRIPT" || tag === "STYLE") return;
["href", "src", "action", "content", "data-src", "poster"].forEach((attr) => {
if (node.hasAttribute(attr)) {
const next = replace(node.getAttribute(attr));
if (next !== node.getAttribute(attr)) node.setAttribute(attr, next);
}
});
}
node.childNodes.forEach((child) => walk(child, replace));
}
function apply(VALUES) {
const replace = replacer(VALUES);
const run = () => {
walk(document.documentElement, replace);
document.title = replace(document.title);
};
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", run);
} else {
run();
}
}
const VARS = window.VARS_GHL;
if (!VARS) {
return;
}
apply(VARS);
})();
/* ===== brand | behaviours ===== */
// =============================================================
// FAQ | Height animation via CSS transition
// =============================================================
// Native <details> elements do not animate height:auto.
// We measure the actual content, animate in px and release to
// auto when the transition ends so it stays responsive.
// =============================================================
(function () {
document.querySelectorAll(".faq__item").forEach((item) => {
const summary = item.querySelector("summary");
const panel = item.querySelector(".faq__panel");
if (!summary || !panel) return;
const open = () => {
item.open = true;
item.classList.add("is-open");
// Start at zero height and force reflow so the
// transition from 0px is perceived.
panel.style.height = "0px";
panel.getBoundingClientRect();
const target = panel.scrollHeight;
panel.style.height = target + "px";
// When done, release to "auto" so the panel
// stays responsive without further calculations.
const onEnd = (e) => {
if (e.propertyName !== "height") return;
panel.style.height = "auto";
panel.removeEventListener("transitionend", onEnd);
};
panel.addEventListener("transitionend", onEnd);
};
const close = () => {
// Lock the current height in px and force reflow to
// be able to animate down to 0.
const start = panel.scrollHeight;
panel.style.height = start + "px";
panel.getBoundingClientRect();
panel.style.height = "0px";
item.classList.remove("is-open");
const onEnd = (e) => {
if (e.propertyName !== "height") return;
item.open = false;
panel.style.height = "";
panel.removeEventListener("transitionend", onEnd);
};
panel.addEventListener("transitionend", onEnd);
};
summary.addEventListener("click", (e) => {
e.preventDefault();
if (item.open) close();
else open();
});
// sync initial state when [open] is pre-applied
if (item.open) {
item.classList.add("is-open");
panel.style.height = "auto";
}
});
})();
// =============================================================
// Reveal on scroll
// =============================================================
// Adds the .in class to .fade-up elements as they enter
// the viewport. The initial double rAF prevents the elements
// in the first fold from snapping without transition on load.
// =============================================================
(function () {
const els = document.querySelectorAll(".fade-up");
if (!els.length) return;
if (!("IntersectionObserver" in window)) {
els.forEach((el) => el.classList.add("in"));
return;
}
// On mobile the vertical viewport is shorter; we use a margin
// that's less restrictive so the reveal isn't delayed.
const isMobile = window.matchMedia("(max-width: 720px)").matches;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("in");
io.unobserve(e.target);
}
});
},
{
threshold: 0,
rootMargin: isMobile ? "0px 0px -8% 0px" : "0px 0px -12% 0px",
},
);
// Double rAF: the browser paints the initial state before the
// observer fires. Without this the first-fold elements snap.
requestAnimationFrame(() => {
requestAnimationFrame(() => {
els.forEach((el) => io.observe(el));
});
});
})();
// =============================================================
// Header | is-scrolled state
// =============================================================
// Adds the is-scrolled class to the header when the user scrolls
// more than 40px. Uses rAF to avoid blocking the main thread.
// =============================================================
(function () {
const header = document.querySelector(".site-header");
if (!header) return;
let raf = null;
function update() {
raf = null;
header.classList.toggle("is-scrolled", window.scrollY > 40);
}
window.addEventListener(
"scroll",
() => {
if (raf) return;
raf = requestAnimationFrame(update);
},
{ passive: true },
);
update();
})();
// =============================================================
// Scroll direction
// =============================================================
// Adds scroll-up or scroll-down to <body> so the nav
// can animate based on direction. Ignores
// movements under 4px to prevent trackpad jitter.
// =============================================================
(function () {
let lastY = window.scrollY;
let raf = null;
// Initial state: assume the user is about to scroll down.
document.body.classList.add("scroll-down");
function update() {
raf = null;
const y = window.scrollY;
if (Math.abs(y - lastY) < 4) return;
if (y > lastY) {
document.body.classList.add("scroll-down");
document.body.classList.remove("scroll-up");
} else {
document.body.classList.add("scroll-up");
document.body.classList.remove("scroll-down");
}
lastY = y;
}
window.addEventListener(
"scroll",
() => {
if (raf) return;
raf = requestAnimationFrame(update);
},
{ passive: true },
);
})();
// =============================================================
// Scrollspy | active link in nav
// =============================================================
// Toggle is-active on the nav link of the visible section
// closest to the viewport top.
// =============================================================
(function () {
const links = Array.from(
document.querySelectorAll('.site-header nav a[href^="#"]'),
);
const map = new Map();
links.forEach((a) => {
const id = a.getAttribute("href").slice(1);
const sec = id && document.getElementById(id);
if (sec) map.set(sec, a);
});
if (!map.size || !("IntersectionObserver" in window)) return;
const visible = new Set();
function refresh() {
// Among the visible sections, pick the one closest
// to the top (with an offset for the sticky header).
let best = null;
let bestTop = Infinity;
visible.forEach((sec) => {
const top = sec.getBoundingClientRect().top;
if (top <= 120 && top < bestTop) {
best = sec;
bestTop = top;
}
});
links.forEach((a) => a.classList.remove("is-active"));
if (best && map.get(best)) map.get(best).classList.add("is-active");
}
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) visible.add(e.target);
else visible.delete(e.target);
});
refresh();
},
{ rootMargin: "-15% 0px -55% 0px", threshold: 0 },
);
map.forEach((_, sec) => io.observe(sec));
window.addEventListener("scroll", refresh, { passive: true });
})();
// =============================================================
// Mobile menu
// =============================================================
// Manages the navigation overlay on small screens.
// Closes via Escape, when tapping a link or when going back to desktop.
// =============================================================
(function () {
const btn = document.querySelector(".nav-toggle");
const overlay = document.getElementById("nav-overlay");
if (!btn || !overlay) return;
const links = overlay.querySelectorAll('a[href^="#"]');
function open() {
overlay.classList.add("is-open");
overlay.setAttribute("aria-hidden", "false");
btn.setAttribute("aria-expanded", "true");
btn.setAttribute("aria-label", "Cerrar menú");
document.body.classList.add("nav-locked");
}
function close() {
overlay.classList.remove("is-open");
overlay.setAttribute("aria-hidden", "true");
btn.setAttribute("aria-expanded", "false");
btn.setAttribute("aria-label", "Abrir menú");
document.body.classList.remove("nav-locked");
}
function toggle() {
btn.getAttribute("aria-expanded") === "true" ? close() : open();
}
btn.addEventListener("click", toggle);
links.forEach((a) => a.addEventListener("click", close));
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && btn.getAttribute("aria-expanded") === "true") {
close();
}
});
// Al volver a desktop, asegurar el estado cerrado.
window.matchMedia("(min-width:901px)").addEventListener("change", (m) => {
if (m.matches) close();
});
})();
// =============================================================
// Modal de bonos
// =============================================================
// Opens an enlarged image when tapping a bonus card.
//
// Scroll lock (iOS-safe technique):
// overflow:hidden en body no funciona en iOS. Se fija el body
// with position:fixed, then position is restored via scrollTo,
// temporarily disabling smooth scroll to avoid the jump.
// =============================================================
(function () {
const modal = document.getElementById("bono-modal");
if (!modal) return;
const dialog = modal.querySelector(".bono-modal__dialog");
const imgEl = modal.querySelector(".bono-modal__image");
const labelEl = modal.querySelector("#bono-modal-caption b");
const nameEl = modal.querySelector("#bono-modal-caption span");
const closeBtn = modal.querySelector(".bono-modal__close");
const bonos = document.querySelectorAll(".bono[data-bono-img]");
let lastTrigger = null;
let savedScrollY = 0;
function lockScroll() {
savedScrollY = window.scrollY || window.pageYOffset || 0;
// Pin the body at its current position (iOS-safe trick).
document.body.style.position = "fixed";
document.body.style.top = `-${savedScrollY}px`;
document.body.style.left = "0";
document.body.style.right = "0";
document.body.style.width = "100%";
}
function unlockScroll() {
document.body.style.position = "";
document.body.style.top = "";
document.body.style.left = "";
document.body.style.right = "";
document.body.style.width = "";
// Suspend smooth scroll so the restore is
// instant and is not perceived as an unwanted trip.
const html = document.documentElement;
const prev = html.style.scrollBehavior;
html.style.scrollBehavior = "auto";
window.scrollTo(0, savedScrollY);
requestAnimationFrame(() => {
html.style.scrollBehavior = prev;
});
}
function open(card) {
lastTrigger = card;
const src = card.getAttribute("data-bono-img");
const label = card.getAttribute("data-bono-label") || "";
const name = card.getAttribute("data-bono-name") || "";
imgEl.src = src;
imgEl.alt = label + " · " + name;
labelEl.textContent = label;
nameEl.textContent = name;
modal.classList.add("is-open");
modal.setAttribute("aria-hidden", "false");
lockScroll();
// preventScroll prevents focus from scrolling the page
// while the body is pinned with position:fixed.
requestAnimationFrame(() => closeBtn.focus({ preventScroll: true }));
}
function close() {
modal.classList.remove("is-open");
modal.setAttribute("aria-hidden", "true");
unlockScroll();
if (lastTrigger) {
// En mobile, el focus sin preventScroll dispara un
// automatic scroll-into-view that feels like a jump.
try {
lastTrigger.focus({ preventScroll: true });
} catch (_) {
lastTrigger.focus();
}
lastTrigger = null;
}
}
bonos.forEach((card) => {
card.addEventListener("click", () => open(card));
card.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
open(card);
}
});
});
closeBtn.addEventListener("click", close);
// Close on clickk outside the dialog.
modal.addEventListener("click", (e) => {
if (e.target === modal) close();
});
// Prevent touch scrolling on the overlay from propagating to the document.
modal.addEventListener(
"touchmove",
(e) => {
if (e.target === modal || e.target === imgEl) e.preventDefault();
},
{ passive: false },
);
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && modal.classList.contains("is-open")) close();
});
})();
// =============================================================
// Price | animated counter
// =============================================================
// When the card enters the viewport the numbers tick up
// from 0 with an easeOutCubic curve. Honors prefers-reduced-motion.
// =============================================================
(function () {
const card = document.querySelector(".precio-card");
if (!card) return;
const targets = card.querySelectorAll(
".precio__breakdown li span:last-child, .precio__strike, .precio__amount",
);
if (!targets.length) return;
const reduce = window.matchMedia("(prefers-reduced-motion:reduce)").matches;
// Extract the number from each node preserving textual prefix and suffix.
const parsed = [];
targets.forEach((el) => {
const raw = el.textContent;
const match = raw.match(/(\d{1,3}(?:\.\d{3})+|\d+)/);
if (!match) return;
const value = parseInt(match[1].replace(/\./g, ""), 10);
if (!Number.isFinite(value)) return;
parsed.push({
el,
value,
prefix: raw.slice(0, match.index),
suffix: raw.slice(match.index + match[0].length),
original: raw,
});
});
if (!parsed.length) return;
const fmt = new Intl.NumberFormat("es-ES");
function render(item, n) {
item.el.textContent = item.prefix + fmt.format(n) + item.suffix;
}
// Reset every number to 0 to avoid the flash before the Observer fires.
if (!reduce) parsed.forEach((p) => render(p, 0));
function animate() {
if (reduce) {
parsed.forEach((p) => (p.el.textContent = p.original));
return;
}
const duration = 1100;
const start = performance.now();
const ease = (t) => 1 - Math.pow(1 - t, 3); // easeOutCubic
function tick(now) {
const t = Math.min(1, (now - start) / duration);
const k = ease(t);
parsed.forEach((p) => render(p, Math.round(p.value * k)));
if (t < 1) requestAnimationFrame(tick);
else parsed.forEach((p) => (p.el.textContent = p.original));
}
requestAnimationFrame(tick);
}
if (!("IntersectionObserver" in window)) {
animate();
return;
}
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
io.unobserve(e.target);
animate();
}
});
},
{ threshold: 0.35 },
);
io.observe(card);
})();
// =============================================================
// Volver al inicio
// =============================================================
(function () {
const btn = document.getElementById("back-to-top");
if (!btn) return;
const onScroll = () => {
btn.classList.toggle("is-visible", window.scrollY > 480);
};
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
btn.addEventListener("click", () => {
const reduce = window.matchMedia("(prefers-reduced-motion:reduce)").matches;
window.scrollTo({ top: 0, behavior: reduce ? "auto" : "smooth" });
});
})();
// =============================================================
// Pauanimatestions when the tab is not visible
// =============================================================
(function () {
const sync = () => {
document.body.classList.toggle("anim-paused", document.hidden);
};
document.addEventListener("visibilitychange", sync);
sync();
})();
// =============================================================
// Pause hero animations when it leaves the viewport
// =============================================================
(function () {
const hero = document.querySelector(".hero");
if (!hero || !("IntersectionObserver" in window)) return;
const io = new IntersectionObserver(
(entries) => {
const e = entries[0];
hero.classList.toggle("is-out", !e.isIntersecting);
},
{ threshold: 0 },
);
io.observe(hero);
})();
/* ===== landing | overrides ===== */
// Landing-specific JS for la-certificacion (Narratipos). Empty by default.
Configure these in GHL → Settings → Custom Values for this sub-account. The HTML above references each token exactly as {{custom_values.<key>}}.
| Token | Value to configure in GHL |
|---|---|
{{custom_values.la_boutique_de_mentores_brand_image}} |
https://www.laboutiquedementores.es/og-image.jpg |
{{custom_values.la_boutique_de_mentores_brand_name}} |
La Boutique de Mentores |
{{custom_values.la_boutique_de_mentores_root_url}} |
https://www.laboutiquedementores.es |
{{custom_values.narratipos_book_amazon_url}} |
https://www.amazon.es/Narratipos-comunicativos-desplegar-potencial-influencia/dp/8425371295 |
{{custom_values.narratipos_brand_color}} |
#0A0A0C |
{{custom_values.narratipos_brand_image}} |
https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/69ea70c5717d5dd4e16bb2b4.png |
{{custom_values.narratipos_brand_name}} |
Narratipos® |
{{custom_values.narratipos_brochure_url}} |
https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/69ea7c216588a29ac2c2e25f.pdf |
{{custom_values.narratipos_cookies_policy_url}} |
politica-de-cookies |
{{custom_values.narratipos_legal_policy_url}} |
aviso-legal |
{{custom_values.narratipos_privacy_policy_url}} |
politica-de-privacidad |
{{custom_values.narratipos_request_access_url}} |
http://api.whatsapp.com/send?phone=+34689739128&text=Hola%20David,%20me%20gustar%C3%ADa%20acceder%20a%20la%20XI%20Certificaci%C3%B3n%20de%20Narratipos%20pero%20tengo%20alguna%20duda,%20%C2%BFme%20puedes%20ayudar? |
{{custom_values.narratipos_root_url}} |
. |
{{custom_values.narratipos_terms_and_conditions_url}} |
terminos-y-condiciones |