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/terminos-y-condiciones/
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>
Términos y Condiciones | {{custom_values.narratipos_brand_name}}
</title>
<meta
name="description"
content="Términos y Condiciones 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}}/terminos-y-condiciones"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/23afcf0b-d128-4f23-b765-0e9990bbe6b8.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/e2e465ac-3ee0-4746-8345-bf325795d656.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/c7727de6-cad8-4087-bc74-e08104f764b1.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}}/terminos-y-condiciones#webpage",
"url": "{{custom_values.narratipos_root_url}}/terminos-y-condiciones",
"name": "Términos y Condiciones | {{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": "Términos y Condiciones",
"item": "{{custom_values.narratipos_root_url}}/terminos-y-condiciones"
}
]
}
]
}
</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/d227cffa-5467-493a-92de-7bf0108c832b.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/1551fed5-f6ff-4638-80ac-f06b4ead82f4.webp 640w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/b6bdee7c-f62f-45e6-9550-41036f760ee3.webp 960w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/1b07a659-9bb3-4930-9e04-69faabbf5712.webp 1280w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/40bc7727-55be-4e49-ad99-7427cdcde257.webp 1920w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/ded830e3-0a3b-4453-b2ef-f56f634760d4.webp 2423w" sizes="(max-width: 640px) 100vw, 2423px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/e8584731-343d-46a6-89b2-67d541744f9a.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">Términos y Condiciones</h1>
<span class="legal__updated">Última revisión · 23/04/2026</span>
</div>
<div class="legal__body">
<h2>1. Identificación y objeto del contrato</h2>
<p>
Los presentes Términos y Condiciones regulan la adquisición del
programa de formación
<strong>{{custom_values.narratipos_brand_name}}</strong> (en
adelante, el «Programa») ofrecido por
<strong>La Boutique de Mentores SL</strong>, con CIF B16709420 y
domicilio en Camino de los Malatones 63, 28110 Algete, Madrid (en
adelante, el «Proveedor»), al cliente que formaliza su inscripción a
través del sitio web
<a
href="{{custom_values.narratipos_root_url}}"
target="_blank"
rel="noopener noreferrer"
><strong>{{custom_values.narratipos_root_url}}</strong></a
>
(en adelante, el «Cliente»).
</p>
<p>
La inscripción al Programa supone la aceptación plena, expresa e
incondicional de todas las cláusulas recogidas en los presentes
Términos y Condiciones, así como del
<a href="{{custom_values.narratipos_legal_policy_url}}"
>Aviso Legal</a
>, la
<a href="{{custom_values.narratipos_privacy_policy_url}}"
>Política de Privacidad</a
>
y la
<a href="{{custom_values.narratipos_cookies_policy_url}}"
>Política de Cookies</a
>.
</p>
<h2>2. Modalidades de pago</h2>
<h3>2.1. Pago único</h3>
<p>
El Cliente puede optar por abonar la totalidad del importe del
Programa en un único pago a través de la pasarela habilitada en el
sitio web. El precio aplicable será el publicado en la página de
inscripción en el momento de formalizar la compra, con el IVA
incluido.
</p>
<h3>2.2. Pago aplazado mediante seQura</h3>
<p>
El Cliente puede optar por financiar el importe del Programa en
cuotas mensuales mediante el servicio de financiación prestado por
<strong>seQura Worldwide, S.A.</strong> (en adelante, «seQura»),
entidad ajena al Proveedor. La aprobación, las condiciones
financieras y la gestión de los pagos quedan sometidas íntegramente
al contrato suscrito por el Cliente con seQura, conforme a sus
propios términos.
</p>
<p>
Una vez aprobada la financiación, el Proveedor recibe el importe
total del Programa por parte de seQura, y el Cliente queda obligado
frente a seQura al pago de las cuotas conforme al cuadro de
amortización aceptado. El impago o retraso en el abono de cualquier
cuota se rige exclusivamente por las condiciones y consecuencias
previstas en el contrato suscrito con seQura.
</p>
<h3>2.3. Carácter vinculante</h3>
<p>
La elección de cualquiera de las modalidades de pago anteriores
constituye un acuerdo firme de adquisición del Programa, sujeto a la
política de garantía y desistimiento prevista en la cláusula 3 de
los presentes Términos y Condiciones.
</p>
<h2>3. Garantía de satisfacción y derecho de desistimiento</h2>
<p>
El Proveedor ofrece al Cliente una
<strong
>garantía de satisfacción de quince (15) días naturales</strong
>, a contar desde la fecha de formalización de la inscripción.
Durante dicho plazo, el Cliente podrá solicitar la devolución
íntegra del importe abonado, sin necesidad de justificar su
decisión, mediante comunicación escrita dirigida a
<a href="mailto:equipo@laboutiquedementores.es"
>equipo@laboutiquedementores.es</a
>
con el asunto «GARANTÍA NARRATIPOS», incluyendo los siguientes
datos:
</p>
<ul>
<li>Nombre completo</li>
<li>
Correo electrónico o teléfono con el que se realizó la inscripción
</li>
<li>Fecha de compra o número de pedido</li>
<li>Motivo de la solicitud (opcional, no obligatorio)</li>
</ul>
<p>
Una vez validada la solicitud, el Proveedor procederá al reembolso
en un plazo máximo de catorce (14) días naturales, mediante el mismo
método de pago utilizado en la compra.
</p>
<p>
Esta garantía es compatible y, donde resulte más favorable al
Cliente, sustituye al derecho de desistimiento previsto en el
artículo 102 del Real Decreto Legislativo 1/2007, de 16 de
noviembre, por el que se aprueba el texto refundido de la Ley
General para la Defensa de los Consumidores y Usuarios (TRLGDCU).
</p>
<p>
Una vez transcurrido el plazo de quince (15) días naturales desde la
inscripción, no se contemplarán reembolsos ni cancelaciones, dado el
carácter digital del Programa, el acceso inmediato a sus contenidos
y el compromiso firme de adquisición asumido por el Cliente. En el
caso de financiación con seQura, el ejercicio efectivo de la
garantía conllevará la cancelación del préstamo asociado conforme a
las condiciones pactadas con dicha entidad.
</p>
<h2>4. Acceso al Programa y obligaciones del Cliente</h2>
<p>
Una vez confirmado el pago (o, en su caso, aprobada la financiación
por seQura), el Proveedor habilitará al Cliente el acceso al
Programa en las fechas y condiciones anunciadas en la página de
inscripción. El acceso es estrictamente personal, individual e
intransferible.
</p>
<p>
El Cliente se obliga a hacer un uso diligente y leal del Programa y
de sus materiales, absteniéndose de compartir credenciales, grabar
sesiones, distribuir contenidos o ceder su acceso a terceros. El
incumplimiento de esta obligación facultará al Proveedor a suspender
el acceso del Cliente sin derecho a reembolso, sin perjuicio de las
acciones legales que correspondan.
</p>
<h2>5. Propiedad intelectual</h2>
<p>
La totalidad de los contenidos, materiales didácticos, vídeos,
guías, plantillas, herramientas y demás elementos proporcionados
como parte del Programa son propiedad intelectual exclusiva del
Proveedor o de terceros que han autorizado su uso. El Cliente
adquiere únicamente una
<strong
>licencia de uso personal, no exclusiva e intransferible</strong
>, limitada a sus propios fines de aprendizaje.
</p>
<p>
Queda expresamente prohibida la reproducción, distribución,
comunicación pública, transformación, puesta a disposición o cesión
a terceros, total o parcial, de los materiales del Programa sin el
consentimiento previo, expreso y por escrito del Proveedor.
</p>
<h2>6. Limitación de responsabilidad</h2>
<p>
El Proveedor se compromete a impartir el Programa con la máxima
diligencia profesional. No obstante, no garantiza la obtención de
resultados específicos por parte del Cliente, dado que su
efectividad depende, entre otros factores, de la dedicación, el
esfuerzo y las circunstancias individuales de cada Cliente.
</p>
<p>
La responsabilidad máxima del Proveedor frente al Cliente, por
cualquier reclamación derivada de los presentes Términos y
Condiciones, se limitará al importe efectivamente abonado por el
Cliente al Proveedor por el Programa contratado.
</p>
<h2>7. Modificaciones</h2>
<p>
El Proveedor se reserva el derecho a modificar los presentes
Términos y Condiciones para adaptarlos a novedades legislativas,
jurisprudenciales o de su propia operativa comercial. Las
modificaciones serán publicadas en el sitio web con razonable
antelación a su entrada en vigor y resultarán aplicables a las
inscripciones formalizadas con posterioridad a dicha publicación.
</p>
<h2>8. Aceptación de las condiciones</h2>
<p>
La inscripción y el pago, ya sea íntegro o mediante la financiación
con seQura, suponen la aceptación plena e incondicional de todas y
cada una de las cláusulas recogidas en los presentes Términos y
Condiciones de Venta.
</p>
<h2>9. Legislación aplicable y jurisdicción</h2>
<p>
Los presentes Términos y Condiciones se rigen por la legislación
española. Para la resolución de cualquier controversia derivada de
su interpretación o ejecución, las partes se someten a los Juzgados
y Tribunales del domicilio del Proveedor, sin perjuicio del fuero
que pudiera corresponder al Cliente en su condición de consumidor.
</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/71d478e9-8b22-43e0-a77a-ffc26cb836fb.webp 240w" sizes="(max-width: 640px) 100vw, 240px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/247dd541-7ef2-4eaa-97c5-860ffe1b6b77.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/37e133f4-ca21-4171-8b64-fd8433d3e949.webp 320w, https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/e04ab17d-939e-4a2e-8bad-205151fcdc50.webp 486w" sizes="(max-width: 640px) 100vw, 486px" />
<img src="https://assets.cdn.filesafe.space/v6bs4AByBa6XPltPfemq/media/478ec4de-c160-4f49-9ee3-a32132a10cba.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/840dcb11-54ae-4dda-bf5b-e3b74785e20b.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/29f4f51c-2146-4624-96e8-b63f6cca84d1.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/29f4f51c-2146-4624-96e8-b63f6cca84d1.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/21137592-bef1-430e-ab6c-dbcf1c30eaf8.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 terminos-y-condiciones (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 terminos-y-condiciones (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 |