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/politica-de-cookies/
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>
Política de Cookies (UE) | {{custom_values.narratipos_brand_name}}
</title>
<meta
name="description"
content="Política de Cookies (UE) de {{custom_values.narratipos_brand_name}}"
/>
<meta name="robots" content="index,follow" />
<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}}/politica-de-cookies"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/63f58c81-4ff1-4b39-8157-59f51cc08205.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/4d046512-417a-481c-bb22-96a70cf316bb.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/120e018c-84a4-4b8a-bc06-dead5410cc65.png"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- 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}}/politica-de-cookies#webpage",
"url": "{{custom_values.narratipos_root_url}}/politica-de-cookies",
"name": "Política de Cookies (UE) | {{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"
}
},
{
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "{{custom_values.narratipos_brand_name}}",
"item": "{{custom_values.narratipos_root_url}}"
},
{
"@type": "ListItem",
"position": 2,
"name": "Política de Cookies",
"item": "{{custom_values.narratipos_root_url}}/politica-de-cookies"
}
]
}
]
}
</script>
</head>
<body>
<main class="legal">
<div class="col-narrow">
<a
href="{{custom_values.narratipos_root_url}}"
class="legal__logo"
aria-label="Narratipos"
>
<picture>
<source type="image/webp" srcset="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/986abb1d-6e8a-4626-a5ed-2b0a84e36a01.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/0ee19287-b857-4718-a277-121a2abc6eae.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/693995f5-2495-42ea-8e14-d2136b9bb413.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/1d35007c-ac24-471c-8a56-842e17ce06d2.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/269ebd29-5e37-48af-bd27-0891fa508766.webp 1920w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/d7b051ea-f3a6-4e04-9663-e212e6db21df.webp 2423w" sizes="(max-width: 640px) 100vw, 2423px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/53c84427-4673-45a1-8edb-dfede0facb48.png" alt="" width="2423" height="2423" decoding="async" />
</picture>
<span>Narratipos</span>
</a>
<div class="legal__head">
<p class="eyebrow">Aviso legal</p>
<div class="rule">
<span class="l"></span><span class="d"></span
><span class="l"></span>
</div>
<h1 class="h-title" style="margin: 0">
Política de Cookies
<span style="opacity: 0.55; font-size: 0.7em">(UE)</span>
</h1>
<span class="legal__updated">Última revisión · 23/04/2026</span>
</div>
<div class="legal__body">
<h2>Inicio</h2>
<p>
Nuestra página web
<a
href="{{custom_values.narratipos_root_url}}"
target="_blank"
rel="noopener noreferrer"
><strong>{{custom_values.narratipos_root_url}}</strong></a
>
(en adelante, la «página web») utiliza cookies y otras tecnologías
relacionadas (para mayor comodidad, todas las tecnologías se
denominan «cookies»).
</p>
<p>
Las cookies también son colocadas por proveedores (terceros) a los
que hemos contratado.
</p>
<p>
En el siguiente documento te informamos sobre el uso de las cookies
en nuestra página web.
</p>
<h2>¿Qué son las cookies?</h2>
<p>
Una cookie es un pequeño registro / archivo que se envía junto al
acceder a las páginas de esta web y que tu navegador almacena en el
dispositivo (sea ordenador, móvil, tablet…).
</p>
<p>
La información almacenada puede ser devuelta a nuestros servidores o
a los servidores de terceros relevantes durante una visita
posterior.
</p>
<h2>¿Qué son los scripts?</h2>
<p>
Un script es un fragmento de código de un programa que se utiliza
para hacer que la página web funcione correctamente y de forma
interactiva y dinámica.
</p>
<p>
Este código puede ejecutarse en nuestros servidores o en tu
dispositivo.
</p>
<h2>¿Qué son las balizas web?</h2>
<p>
Una baliza web (o etiqueta de píxel) es una pequeña pieza (texto o
imagen) que está insertada de forma invisible en la página web para
hacer seguimiento del tráfico. Para ello, se almacenan varios datos
sobre el usuario mediante esta técnica.
</p>
<h2>Cookies</h2>
<h3>Cookies Técnicas o Funcionales</h3>
<p>
Algunas cookies aseguran que ciertas partes de la página web
funcionen correctamente y que las preferencias como usuario sigan
recordándose.
</p>
<p>
Al colocar cookies funcionales, facilitamos la visita a nuestra
página web. De esta manera, no hay necesidad de introducir de manera
repetida la misma información cuando visitas nuestra web y, por
ejemplo, los artículos permanecen en tu cesta de compra hasta que se
hayan pagado. Estas cookies se pueden colocar sin el consentimiento
por parte del usuario.
</p>
<h3>Cookies Analíticas</h3>
<p>
Usamos cookies analíticas para optimizar la experiencia en la página
web para nuestros usuarios. Con estas cookies analíticas obtenemos
conocimientos del uso de nuestra página web. Te pediremos tu
consentimiento para insertar este tipo de cookies.
</p>
<h3>Cookies de Marketing y de Seguimiento</h3>
<p>
Las cookies de marketing y de seguimiento son cookies usadas para
crear perfiles de usuario y se utilizan para mostrar publicidad o
hacer el seguimiento del usuario en esta página web o en varias webs
con fines de marketing. Te pediremos tu consentimiento para insertar
este tipo de cookies.
</p>
<h2>Cookies utilizadas en esta página web</h2>
<ul>
<li>
<a
href="https://www.gohighlevel.com/"
target="_blank"
rel="noopener noreferrer"
><strong>Go High Level</strong></a
>
</li>
<li><strong>Google</strong> (YouTube, Analytics, Fonts)</li>
<li><strong>Stripe</strong></li>
<li><strong>PayPal</strong></li>
<li><strong>Facebook</strong></li>
</ul>
<h2>Consentimiento</h2>
<p>
Cuando visites nuestra página web por primera vez, te mostraremos
una ventana emergente con una explicación sobre las cookies.
</p>
<p>
Tan pronto como aceptes, consientes que usemos las cookies y los
complementos que has seleccionado en la ventana emergente, tal y
como se describe en esta política de cookies.
</p>
<p>
Puedes desactivar el uso de cookies a través de tu navegador, pero
ten en cuenta que nuestra página web puede dejar de funcionar
correctamente.
</p>
<h2>Tus derechos con respecto a los datos personales</h2>
<ul>
<li>
<strong>Tienes derecho a saber</strong> por qué se necesitan tus
datos personales, qué sucederá con ellos y durante cuánto tiempo
se conservarán.
</li>
<li>
<strong>Tienes derecho a acceder y solicitar</strong> los datos
personales que estamos conservando.
</li>
<li>
<strong
>Tienes derecho a completar, rectificar, borrar o
bloquear</strong
>
tus datos personales cuando lo desees. Si nos das tu
consentimiento para procesar tus datos, tienes derecho a revocar
dicho consentimiento y a que se eliminen tus datos personales.
</li>
<li>
<strong>Tienes derecho a oponerte al tratamiento</strong> de tus
datos. Cumplimos con esto, a menos que existan motivos
justificados para el procesamiento.
</li>
</ul>
<p>
Para ejercer estos derechos, por favor ponte en contacto con
nosotros en los datos del final de esta página.
</p>
<p>
Si tienes alguna queja sobre cómo gestionamos tus datos, nos
gustaría que nos la hicieras saber, pero también tienes derecho a
enviar una queja a la autoridad supervisora (la Agencia Española de
Protección de Datos).
</p>
<h2>Activación, desactivación y eliminación de cookies</h2>
<p>
Puedes utilizar tu navegador web para eliminar las cookies de manera
automática o manual. También puedes especificar que ciertas cookies
no pueden ser colocadas. Otra opción es cambiar los ajustes de tu
navegador para que recibas un mensaje cada vez que se coloca una
cookie.
</p>
<p>
Para obtener más información sobre estas opciones, consulta las
instrucciones de la sección «Ayuda» de tu navegador.
</p>
<p>
Ten en cuenta que nuestra página web no puede funcionar
correctamente si todas las cookies están desactivadas. Si borras las
cookies de tu navegador, se volverán a colocar después de repetir el
proceso de consentimiento cuando vuelvas a visitar nuestra página
web.
</p>
<h2>Datos de contacto</h2>
<div class="legal__contact">
<p>
<strong>Denominación social:</strong> La Boutique de Mentores SL
</p>
<p><strong>CIF:</strong> B16709420</p>
<p>
<strong>Domicilio social:</strong> Camino de los Malatones 63,
28110 Algete, Madrid, España
</p>
<p>
<strong>Correo electrónico:</strong>
<a href="mailto:equipo@laboutiquedementores.es"
>equipo@laboutiquedementores.es</a
>
</p>
<p>
<strong>Sitio web:</strong>
<a
href="{{custom_values.narratipos_root_url}}"
target="_blank"
rel="noopener noreferrer"
>{{custom_values.narratipos_root_url}}</a
>
</p>
</div>
<a href="{{custom_values.narratipos_root_url}}" class="legal__back"
>← Volver a Narratipos</a
>
</div>
</div>
</main>
<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/90744ff4-817c-4cf5-822d-10539b1f04cc.webp 240w" sizes="(max-width: 640px) 100vw, 240px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/0ecf07bb-965b-4515-b527-6ba9c05a14c1.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/f16c5e05-4e2a-4c8d-8b9a-df1f6ac0a8a7.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/ac9ec4df-c683-4685-b9e8-d66111b6b09b.webp 486w" sizes="(max-width: 640px) 100vw, 486px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/3c3b1c96-166a-43e3-baa8-dbe0cca1dcf7.png" alt="Firma de David Sobrino" class="site-footer__signature" loading="lazy" decoding="async" />
</picture>
</a>
</div>
<div class="col site-footer__center">
<div class="site-footer__legal">
<span
>Todos los derechos reservados · La Boutique de Mentores SL ·
2026</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>
<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/08b7577d-9d84-450f-9dc7-66a86e5dac94.svg"
alt="Innki Tech"
loading="lazy"
decoding="async"
/>
</a>
</div>
</footer>
</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/3765c2e7-6585-4030-aa02-5ac926b4853b.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/3765c2e7-6585-4030-aa02-5ac926b4853b.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/ce5c0e3f-a2a5-423f-a42c-6d0997a7f1bb.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 politica-de-cookies (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 politica-de-cookies (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_brand_color}} |
#0A0A0C |
{{custom_values.narratipos_brand_name}} |
Narratipos® |
{{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_root_url}} |
. |
{{custom_values.narratipos_terms_and_conditions_url}} |
terminos-y-condiciones |