/* =====================================================
IMPARABLES — Premium Book Landing v3
Author: Jesús Ortiz García
Stack: Bootstrap 5.3.8 + Bootstrap Icons (local)
Fonts: Playfair Display + Inter + JetBrains Mono (local woff2)
Strategy: Mobile-first, Bootstrap utilities first, custom CSS only when needed.
Breakpoints (Bootstrap): sm=576, md=768, lg=992, xl=1200, xxl=1400
===================================================== */
/* ---------- @font-face (LOCAL) ---------- */
/* Playfair Display */
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/playfair-display-latin-ext-400-normal.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/playfair-display-latin-400-normal.woff2') format('woff2'); unicode-range:U+0000-00FF; }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/playfair-display-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/playfair-display-latin-ext-600-normal.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/playfair-display-latin-600-normal.woff2') format('woff2'); unicode-range:U+0000-00FF; }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:600; font-display:swap; src:url('../fonts/playfair-display-latin-600-italic.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/playfair-display-latin-ext-700-normal.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/playfair-display-latin-700-normal.woff2') format('woff2'); unicode-range:U+0000-00FF; }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:700; font-display:swap; src:url('../fonts/playfair-display-latin-700-italic.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/playfair-display-latin-ext-800-normal.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/playfair-display-latin-800-normal.woff2') format('woff2'); unicode-range:U+0000-00FF; }
/* Inter */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/inter-latin-ext-300-normal.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/inter-latin-300-normal.woff2') format('woff2'); unicode-range:U+0000-00FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-latin-ext-400-normal.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-latin-400-normal.woff2') format('woff2'); unicode-range:U+0000-00FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter-latin-ext-500-normal.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter-latin-500-normal.woff2') format('woff2'); unicode-range:U+0000-00FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-latin-ext-600-normal.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-latin-600-normal.woff2') format('woff2'); unicode-range:U+0000-00FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter-latin-ext-700-normal.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter-latin-700-normal.woff2') format('woff2'); unicode-range:U+0000-00FF; }
/* JetBrains Mono + Bebas Neue */
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/bebas-neue-latin-400-normal.woff2') format('woff2'); }
/* ---------- TOKENS (refined palette · color theory) ----------
PALETTE PRINCIPLES
- Warm-warm harmony: ink ligeramente cálido (no azul puro) para armonizar con la crema
- Gold tridimensional: 4 stops (champagne · gold · burnt-amber · flame) para riqueza
- Sombras tintadas (NO grises puros): light=sepia warm · dark=ink deep
- Acento complementario teal (paralympic medal feel) para tensión visual ocasional
- Texto secundario: warm-gray con undertone sepia, no gris frío
*/
:root {
/* ---- Brand core ---- */
--imp-ink: #0d1622; /* ink ligeramente cálido (tinte sepia) */
--imp-ink-2: #1c2638;
--imp-ink-3: #2a3548; /* nuevo intermedio para profundidad */
--imp-cream: #f8f3e8; /* warm white paper */
--imp-cream-2: #f0e7d2;
--imp-cream-3: #e9dec2; /* nuevo: para fills suaves */
--imp-paper: #fffdf8; /* paper con tinte sepia mínimo */
/* ---- Gold scale (HSL-armónico, saltos uniformes en luminancia/saturación) ----
Diseñado con HSL para garantizar progresión cromática lineal:
champagne H46 S78 L82 → gold-3 H42 S85 L64 → gold-2 H38 S70 L54
→ gold H32 S70 L40 → amber H26 S72 L42 → flame H16 S74 L46 → rose H8 S40 L50
Esto evita "saltos" feos entre stops del gradient gold */
--imp-champagne: #f9e6b0; /* highlight cálido (era #f8e3a8, más coherente con gold-3) */
--imp-gold: #9c6b1d; /* base profundo (era #a8761f, ligero shift HSL) */
--imp-gold-2: #d49e36; /* tono medio (refinado de #d9a23a) */
--imp-gold-3: #f0c053; /* highlight gold */
--imp-amber: #c0741f; /* burnt amber - puente perfecto gold→flame */
--imp-flame: #cf5320; /* flame ligeramente más saturado */
--imp-flame-2: #ec8849;
--imp-rose: #b6594b; /* rose terracota */
--imp-oxblood: #6d2a26; /* énfasis editoriales */
/* ---- Complementary supporting accent ---- */
--imp-teal: #1f4a52; /* teal profundo (complementario del gold) */
--imp-moss: #3a5a3c; /* moss (vida, naturaleza, esfuerzo) */
/* ---- Lines / borders ---- */
--imp-line: #e0d4ba; /* línea cream cálida */
--imp-line-strong: #c9b890;
/* ---- Semantic mapping (light) ----
Verificado WCAG AA sobre --bg #f8f3e8:
- --ink (#0d1622) ratio 14.5:1 (AAA Large + Normal)
- --ink-soft (#3a3324) ratio 10.6:1 (AAA)
- --muted (#6e6657) ratio 4.8:1 (AA Normal) — antes #7d7461 daba 3.8:1 (AA Large only) */
--bg: var(--imp-cream);
--bg-alt: var(--imp-cream-2);
--surface: var(--imp-paper);
--ink: var(--imp-ink);
--ink-soft: #3a3324; /* warm-gray con más punch (era #4a4234) - WCAG AAA */
--muted: #6e6657; /* warm muted con contraste AA (era #7d7461) */
--accent: var(--imp-gold);
--accent-2: var(--imp-flame);
--accent-3: var(--imp-teal); /* tertiary accent disponible */
--line: var(--imp-line);
/* ---- Tinted shadows (NUNCA gris puro) ----
En light usamos shadows tintados con la propia ink (warm sepia) para integración.
En dark usamos shadows muy profundos negros para drama editorial.
*/
--shadow-1: 0 6px 22px rgba(45,28,8,.08), 0 2px 6px rgba(45,28,8,.04);
--shadow-2: 0 22px 55px rgba(45,28,8,.12), 0 8px 18px rgba(45,28,8,.06);
--shadow-3: 0 38px 95px rgba(45,28,8,.16), 0 16px 32px rgba(45,28,8,.08);
--shadow-glow: 0 30px 80px rgba(204,118,32,.22), 0 0 30px rgba(240,192,83,.12);
--shadow-warm: 0 24px 60px rgba(207,83,32,.18);
--shadow-cool: 0 24px 60px rgba(31,74,82,.22);
/* ---- Radii ---- */
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 26px;
--radius-xl: 38px; /* para hero blobs */
/* ---- Easings ---- */
--ease: cubic-bezier(.22,1,.36,1);
--ease-spring: cubic-bezier(.34,1.56,.64,1);
--ease-emphatic: cubic-bezier(.16,1,.3,1); /* editorial reveal */
--ease-back: cubic-bezier(.7,-.4,.4,1.4); /* overshoot */
/* ---- Gradients (refined stops) ---- */
--grad-gold: linear-gradient(135deg,
var(--imp-champagne) 0%,
var(--imp-gold-3) 22%,
var(--imp-gold-2) 45%,
var(--imp-amber) 65%,
var(--imp-flame) 82%,
var(--imp-rose) 100%);
--grad-gold-2: linear-gradient(135deg, var(--imp-gold-2) 0%, var(--imp-amber) 50%, var(--imp-flame) 100%);
--grad-gold-soft: linear-gradient(135deg, var(--imp-champagne), var(--imp-gold-2));
--grad-ink: linear-gradient(180deg, var(--imp-ink) 0%, var(--imp-ink-2) 50%, var(--imp-ink-3) 100%);
--grad-paper: linear-gradient(180deg, var(--imp-paper) 0%, var(--imp-cream) 100%);
/* ---- Fonts ---- */
--ff-serif:'Playfair Display','Cormorant Garamond',Georgia,'Times New Roman',serif;
--ff-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
--ff-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--ff-display:'Bebas Neue','Inter',sans-serif;
/* Bootstrap variable overrides */
--bs-body-font-family: var(--ff-sans);
--bs-body-color: var(--ink);
--bs-body-bg: var(--bg);
--bs-primary: var(--imp-flame);
--bs-primary-rgb: 207,83,32;
--bs-link-color: var(--accent);
--bs-link-hover-color: var(--accent-2);
--bs-border-color: var(--line);
--bs-emphasis-color: var(--ink);
--bs-secondary-color: var(--ink-soft);
--bs-tertiary-color: var(--muted);
}
[data-bs-theme="dark"] {
/* Tres niveles de superficie (background → bg-alt → surface) con
diferenciación de luminancia perceptible (~5% L cada salto) para crear
profundidad espacial sin contraste estridente */
--bg: #060a11; /* base, casi negro con tinte azul mínimo */
--bg-alt: #0d131e; /* +3% L para hero sections elevadas */
--surface: #16202f; /* +5% L para cards/modals (mayor jerarquía) */
--ink: #f6ecd6; /* warm cream (era #f4ead4, +1% L) - WCAG AAA sobre --bg */
--ink-soft: #d5cba5; /* warm cream-soft (era #cfc4a8, +3% L) - WCAG AAA */
--muted: #9a906f; /* muted warm (era #8a8268, +4% L) - WCAG AA */
--accent: var(--imp-gold-2);
--accent-2: var(--imp-flame-2);
--accent-3: #2d6b76; /* teal más claro en dark */
--line: #243345; /* línea +5% L para mejor visibilidad (era #1f2c3e) */
/* Sombras con tinte gold (no gris puro) para drama editorial cálido */
--shadow-1: 0 6px 24px rgba(0,0,0,.55), 0 2px 6px rgba(217,162,58,.04);
--shadow-2: 0 24px 60px rgba(0,0,0,.65), 0 8px 18px rgba(217,162,58,.06);
--shadow-3: 0 40px 100px rgba(0,0,0,.75), 0 0 0 1px rgba(217,162,58,.08);
--shadow-glow: 0 30px 100px rgba(217,162,58,.32), 0 0 50px rgba(217,162,58,.18);
--shadow-warm: 0 24px 70px rgba(236,136,73,.32);
--bs-body-bg: var(--bg);
--bs-body-color: var(--ink);
--bs-border-color: var(--line);
}
/* ---------- BASE ---------- */
*,*::before,*::after { box-sizing: border-box; }
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
/* En móvil reduce scroll-padding-top para no dejar tanto hueco
bajo el navbar fixed-top (más compacto) */
@media (max-width: 767.98px) {
html { scroll-padding-top: 64px; }
}
body {
font-family: var(--ff-sans);
background: var(--bg);
color: var(--ink);
/* Fluid type — escala con viewport entre 0.95rem (mobile) y 1.05rem (desktop)
para mantener legibilidad sin saltos por breakpoint */
font-size: clamp(.95rem, 0.92rem + 0.18vw, 1.05rem);
line-height: 1.7;
font-weight: 400;
/* Tipografía editorial: kerning, ligatures, contextual alternates,
stylistic set 01, oldstyle nums proporcionales (figura editorial) */
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1, 'onum' 1;
font-variant-numeric: oldstyle-nums proportional-nums;
overflow-x: hidden;
/* Transición suave del cambio de tema (body bg + color + filter chain) */
transition:
background-color .4s var(--ease),
color .4s var(--ease);
}
/* Subtle paper noise texture */
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none;
z-index: 1;
opacity: .3;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
[data-bs-theme="dark"] body::before { opacity:.5; mix-blend-mode: overlay; }
/* Selection — gold con halo cálido y mejor legibilidad */
::selection,
::-moz-selection {
background: color-mix(in srgb, var(--accent) 88%, transparent);
color: var(--imp-paper);
text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
/* ===== A11Y · focus-visible global (gold-ring uniforme) =====
Activado solo en navegación por teclado (no en click de ratón) gracias a
:focus-visible. Mejor contraste, no rompe diseño en mouse-only */
:focus-visible {
outline: 2px solid color-mix(in srgb, var(--imp-gold-2) 70%, transparent);
outline-offset: 3px;
border-radius: 4px;
}
/* Botones / links con border-radius propio respetan su forma */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
outline-offset: 4px;
}
/* En inputs/textareas el outline lo gestiona el componente */
.form-control:focus-visible,
.form-select:focus-visible { outline: none; }
/* ===== A11Y · touch targets (≥44px en mobile/coarse pointer, WCAG 2.5.5) ===== */
@media (pointer: coarse) {
.nav-link { padding: 12px 16px !important; }
.footer-nav a,
.footer-legal a { padding: 6px 4px; }
}
/* Reduce-motion · respetar preferencia del usuario en TODA la web */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
body { transition: none; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* HEADINGS — escala editorial premium con kerning y tracking finos
- Tracking: cuanto mayor el cuerpo, más negativo (óptico) -- proportional optical sizing manual
- text-wrap: balance evita viudas/huérfanas en titulares (Chrome 114+, Safari 17.4+, Firefox 121+)
- text-wrap: pretty en párrafos para terminar líneas con elegancia
*/
h1,h2,h3,h4,h5,h6,.display-1,.display-2,.display-3,.display-4 {
font-family: var(--ff-serif);
font-weight: 700;
line-height: 1.08;
color: var(--ink);
font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1, 'ss01' 1, 'lnum' 1;
font-variant-numeric: lining-nums;
text-wrap: balance;
-webkit-hyphens: manual; hyphens: manual;
}
h1, .display-1 { letter-spacing: -0.032em; line-height: 1.04; }
h2, .display-2 { letter-spacing: -0.026em; line-height: 1.08; }
h3, .display-3 { letter-spacing: -0.02em; line-height: 1.15; }
h4 { letter-spacing: -0.014em; line-height: 1.2; }
h5, h6 { letter-spacing: -0.008em; line-height: 1.3; }
p {
color: var(--ink-soft);
text-wrap: pretty;
}
/* Opt-in: párrafos de artículo / lectura larga con medida óptima (~75ch) */
.prose p,
article.prose,
.legal-page main p { max-width: 75ch; }
.lead {
/* Fluid lead size — entre 1.05rem mobile y 1.18rem desktop */
font-size: clamp(1.05rem, 1rem + 0.3vw, 1.18rem);
line-height: 1.65;
color: var(--ink-soft);
font-weight: 400;
text-wrap: pretty;
letter-spacing: 0.005em; /* tracking levemente abierto para presence */
}
strong, b { font-weight: 600; color: var(--ink); }
em, i { font-style: italic; }
small {
font-feature-settings: 'kern' 1, 'liga' 1, 'tnum' 0, 'onum' 1;
font-size: .82em;
}
/* ===== Utilities tipográficas ===== */
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.text-nowrap-md { white-space: normal; }
@media (min-width: 768px) {
.text-nowrap-md { white-space: nowrap; }
}
/* Tabular numbers para fechas, precios, contadores */
.tabular { font-variant-numeric: tabular-nums lining-nums; }
/* ===== Images · lazy + fade-in elegante ===== */
img {
max-width: 100%;
height: auto;
}
img[loading="lazy"] {
transition: opacity .6s var(--ease), filter .6s var(--ease);
}
img[loading="lazy"]:not([src]),
img[loading="lazy"][src=""] {
opacity: 0;
filter: blur(4px);
}
/* Links con subrayado dorado animado por defecto en cuerpo de texto */
a { color: var(--accent); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--accent-2); }
.synopsis-content a,
.author-bio a,
.faq-section .accordion-body a {
background-image: linear-gradient(var(--accent-2), var(--accent-2));
background-size: 0 1.5px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size .4s var(--ease);
}
.synopsis-content a:hover,
.author-bio a:hover,
.faq-section .accordion-body a:hover { background-size: 100% 1.5px; }
/* Premium eyebrow label · línea dorada con draw-in animado */
.eyebrow {
display: inline-flex; align-items: center;
font-family: var(--ff-mono);
font-size: .72rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--accent);
position: relative;
padding-left: 38px;
}
.eyebrow::before {
content: ""; position: absolute; left: 0; top: 50%;
width: 28px; height: 1px;
background: linear-gradient(90deg, transparent, var(--accent));
transform-origin: right center;
animation: eyebrowDraw 1s var(--ease-emphatic) both;
}
.eyebrow.center { padding-right: 38px; }
.eyebrow.center::after {
content: ""; position: absolute; right: 0; top: 50%;
width: 28px; height: 1px;
background: linear-gradient(90deg, var(--accent), transparent);
transform-origin: left center;
animation: eyebrowDraw 1s var(--ease-emphatic) both;
}
@keyframes eyebrowDraw {
from { transform: scaleX(0); opacity: 0; }
to { transform: scaleX(1); opacity: 1; }
}
/* Decorative divider · diamante con pulso continuo + líneas con draw-in */
.divider-fancy {
display: flex; align-items: center; justify-content: center; gap: 18px;
margin: 24px auto 0;
max-width: 320px;
opacity: .9;
}
.divider-fancy::before, .divider-fancy::after {
content: ""; flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
transform-origin: right center;
animation: dividerDraw .9s .15s var(--ease-emphatic) both;
}
.divider-fancy::after { transform-origin: left center; }
.divider-fancy .diamond {
width: 10px; height: 10px;
transform: rotate(45deg);
background: var(--grad-gold-2);
box-shadow:
0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent),
0 0 16px color-mix(in srgb, var(--accent) 35%, transparent);
animation: diamondPulse 3.5s ease-in-out infinite;
}
@keyframes dividerDraw {
from { transform: scaleX(0); opacity: 0; }
to { transform: scaleX(1); opacity: 1; }
}
@keyframes diamondPulse {
0%, 100% {
transform: rotate(45deg) scale(1);
box-shadow:
0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent),
0 0 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
50% {
transform: rotate(45deg) scale(1.18);
box-shadow:
0 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent),
0 0 28px color-mix(in srgb, var(--accent) 55%, transparent);
}
}
/* Section spacing — fluid responsive con cap mobile bajo (48-56px) y desktop
amplio (110-120px) para ritmo editorial */
section {
padding-block: clamp(48px, 7.5vw, 110px);
position: relative;
z-index: 2;
}
/* Container fluido — limitar legibilidad de texto a ~75ch en lectura larga */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
--bs-gutter-x: clamp(1rem, 3vw, 2rem);
}
/* SECTION TITLE — clip-path reveal editorial:
El texto se descubre desde abajo hacia arriba con clip-path, sin necesidad
de tocar el HTML. La animación se dispara cuando el ancestro [data-reveal]
recibe la clase .in (gestionado por main.js).
Compatible con descenders italics (inset bottom negativo).
*/
.section-title {
font-size: clamp(1.8rem, 5vw, 3.4rem);
margin-bottom: .25rem;
font-weight: 700;
position: relative;
}
[data-reveal] .section-title {
clip-path: inset(100% 0 -12% 0);
transform: translateY(18px);
transition:
clip-path 1.1s var(--ease-emphatic) .15s,
transform 1.1s var(--ease-emphatic) .15s;
will-change: clip-path, transform;
}
[data-reveal].in .section-title {
clip-path: inset(0 0 -12% 0);
transform: translateY(0);
}
.section-kicker {
color: var(--muted);
max-width: 640px;
margin: 22px auto 0;
line-height: 1.7;
font-size: clamp(.95rem, 1.6vw, 1.05rem);
text-wrap: pretty;
}
/* Gradient text helpers */
.text-grad {
background: var(--grad-gold);
-webkit-background-clip: text; background-clip: text; color: transparent;
display: inline-block;
}
@keyframes gradShift {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.text-grad-anim {
background: linear-gradient(135deg, var(--imp-gold-3), var(--imp-gold-2), var(--imp-flame), var(--imp-rose), var(--imp-flame), var(--imp-gold-2), var(--imp-gold-3));
background-size: 300% 300%;
-webkit-background-clip: text; background-clip: text; color: transparent;
animation: gradShift 9s ease infinite;
}
/* ---------- NAVBAR ---------- */
.navbar.imp-nav {
background: transparent;
padding: 18px 0;
transition: all .45s var(--ease);
border-bottom: 1px solid transparent;
z-index: 1050;
}
.navbar.imp-nav.scrolled {
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: saturate(1.6) blur(16px);
-webkit-backdrop-filter: saturate(1.6) blur(16px);
padding: 10px 0;
border-bottom-color: var(--line);
box-shadow: var(--shadow-1);
}
.navbar.imp-nav .navbar-brand,
.footer .navbar-brand {
font-family: var(--ff-serif);
font-weight: 700;
font-size: 1.45rem;
color: var(--ink);
letter-spacing: -0.018em;
display: inline-flex; align-items: center; gap: 12px;
text-decoration: none;
transition: opacity .3s var(--ease);
}
@media (min-width: 768px) {
.navbar.imp-nav .navbar-brand,
.footer .navbar-brand { font-size: 1.65rem; }
}
/* ===== IMPARABLES LOGO MARK — antorcha SVG premium =====
Theme-aware: la llama mantiene los dorados de la marca (siempre);
el mango y la base usan currentColor (se adaptan a light/dark) */
.imp-logo-mark {
width: 32px; height: 40px;
flex-shrink: 0;
color: var(--ink);
filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--imp-flame) 28%, transparent));
transition: transform .55s var(--ease-spring), filter .4s var(--ease);
}
@media (min-width: 768px) {
.imp-logo-mark { width: 36px; height: 45px; }
}
.navbar.imp-nav .navbar-brand:hover .imp-logo-mark,
.footer .navbar-brand:hover .imp-logo-mark {
transform: rotate(-5deg) scale(1.08);
filter: drop-shadow(0 5px 14px color-mix(in srgb, var(--imp-flame) 55%, transparent));
}
/* ===== IMPARABLES LOGO IMG — versión raster/SVG-file del cliente =====
Si existe assets/logo-imparables.{svg|png}, consent.js lo inyecta y queda
visible. El SVG vectorial fallback se oculta automáticamente vía sibling. */
.imp-logo-img {
height: 40px;
width: auto;
max-width: 180px;
display: block;
flex-shrink: 0;
object-fit: contain;
/* Filtro warm: alinea los azules fríos del logo original con la paleta
cálida del web (gold + flame + warm ink). Si tu logo ya viene en colores
de marca, añade la clase `imp-logo-img--raw` al para desactivarlo */
filter:
sepia(.45)
saturate(1.35)
hue-rotate(-8deg)
brightness(.96)
drop-shadow(0 2px 6px color-mix(in srgb, var(--imp-flame) 28%, transparent));
transition: transform .55s var(--ease-spring), filter .4s var(--ease);
}
@media (min-width: 768px) {
.imp-logo-img { height: 46px; max-width: 220px; }
}
[data-bs-theme="dark"] .imp-logo-img {
/* En dark mode subimos algo de brillo para que el logo no quede apagado */
filter:
sepia(.35)
saturate(1.45)
hue-rotate(-8deg)
brightness(1.12)
drop-shadow(0 2px 6px color-mix(in srgb, var(--imp-flame) 35%, transparent));
}
.navbar.imp-nav .navbar-brand:hover .imp-logo-img,
.footer .navbar-brand:hover .imp-logo-img {
transform: rotate(-3deg) scale(1.04);
filter:
sepia(.45)
saturate(1.5)
hue-rotate(-8deg)
brightness(1.02)
drop-shadow(0 5px 14px color-mix(in srgb, var(--imp-flame) 55%, transparent));
}
/* Opt-out: si el logo ya viene en colores del web, body.imp-logo-img--raw
desactiva el filtro de color (solo deja drop-shadow) */
body.imp-logo-img--raw .imp-logo-img,
body.imp-logo-img--raw .imp-logo-img:hover {
filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--imp-flame) 28%, transparent));
}
/* Si el ![]()
existe (consent.js lo inyectó):
• oculta el SVG fallback
• oculta el wordmark separado (porque el logo del cliente ya incluye el texto)
Si tu logo NO incluye el texto, añade body.imp-logo-img--mark-only para
volver a mostrar el wordmark al lado */
.imp-logo-img + .imp-logo-mark,
.imp-logo-img ~ .imp-wordmark { display: none !important; }
body.imp-logo-img--mark-only .imp-logo-img ~ .imp-wordmark {
display: inline-block !important;
}
/* La llama parpadea sutilmente (vida) */
.imp-logo-flame {
transform-origin: 50% 100%;
transform-box: fill-box;
animation: impFlicker 3.2s ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes impFlicker {
0%, 100% { transform: scale(1, 1); opacity: 1; }
18% { transform: scale(1.03, 0.97); opacity: .94; }
37% { transform: scale(0.97, 1.03); opacity: 1; }
54% { transform: scale(1.015, 0.99); opacity: .97; }
71% { transform: scale(1.03, 0.96); opacity: 1; }
88% { transform: scale(0.99, 1.02); opacity: .96; }
}
@media (prefers-reduced-motion: reduce) {
.imp-logo-flame { animation: none; }
.imp-logo-mark { transition: none; }
}
/* Wordmark — sweep dorado al hover */
.imp-wordmark {
background: linear-gradient(
100deg,
var(--ink) 0%,
var(--ink) 38%,
var(--imp-gold-2) 50%,
var(--ink) 62%,
var(--ink) 100%
);
background-size: 300% 100%;
background-position: 0% 50%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
transition: background-position 1.4s var(--ease);
display: inline-block;
line-height: 1;
}
.navbar.imp-nav .navbar-brand:hover .imp-wordmark,
.footer .navbar-brand:hover .imp-wordmark {
background-position: -100% 50%;
}
/* LEGACY: .brand-mark (círculo con "I") — deprecated. Hidden por si queda
en alguna página cacheada antes del rollout del SVG */
.brand-mark { display: none !important; }
.navbar.imp-nav .nav-link {
font-family: var(--ff-sans);
font-size: .88rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--ink);
padding: 8px 14px !important;
position: relative;
}
.navbar.imp-nav .nav-link::after {
content: ""; position: absolute;
left: 14px; right: 14px; bottom: 4px;
height: 2px;
background: var(--grad-gold-2);
transform: scaleX(0); transform-origin: left;
transition: transform .4s var(--ease);
border-radius: 2px;
}
.navbar.imp-nav .nav-link:hover,
.navbar.imp-nav .nav-link.active { color: var(--accent); }
.navbar.imp-nav .nav-link:hover::after,
.navbar.imp-nav .nav-link.active::after { transform: scaleX(1); }
/* ===== THEME TOGGLE — minimal moon ↔ sun (gold-accent premium) ===== */
.theme-toggle {
width: 42px; height: 42px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--imp-gold-2) 28%, var(--line));
background: linear-gradient(
160deg,
color-mix(in srgb, var(--surface) 96%, transparent) 0%,
color-mix(in srgb, var(--bg-alt) 96%, transparent) 100%
);
color: var(--ink);
cursor: pointer;
font-size: .98rem;
box-shadow:
0 3px 10px color-mix(in srgb, var(--imp-gold) 10%, transparent),
inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
transition:
transform .55s var(--ease-spring),
border-color .35s var(--ease),
color .35s var(--ease),
box-shadow .35s var(--ease);
}
.theme-toggle:hover {
transform: rotate(-18deg) scale(1.08);
border-color: color-mix(in srgb, var(--imp-gold) 65%, var(--line));
color: var(--accent);
box-shadow:
0 8px 22px color-mix(in srgb, var(--imp-gold) 28%, transparent),
inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
}
.theme-toggle:active { transform: rotate(0) scale(.96); }
.theme-toggle:focus-visible {
outline: none;
box-shadow:
0 0 0 3px color-mix(in srgb, var(--imp-gold-2) 35%, transparent),
0 4px 12px color-mix(in srgb, var(--imp-gold) 18%, transparent);
}
[data-bs-theme="dark"] .theme-toggle {
background: linear-gradient(
160deg,
color-mix(in srgb, var(--imp-ink-3) 75%, transparent) 0%,
color-mix(in srgb, var(--imp-ink-2) 75%, transparent) 100%
);
}
/* Icon swap — light mode: muestra moon (irás a dark); dark: muestra sun */
.theme-toggle .bi-sun-fill,
.theme-toggle .bi-moon-fill { transition: transform .4s var(--ease-spring), opacity .3s var(--ease); }
.theme-toggle .bi-sun-fill { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-moon-fill { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-sun-fill { display: inline-block; }
/* Hover: gira suavemente el icono visible para reforzar el "cambio de día/noche" */
.theme-toggle:hover .bi-moon-fill { transform: rotate(-25deg); }
.theme-toggle:hover .bi-sun-fill { transform: rotate(25deg); }
/* ===== NAVBAR TOGGLER — premium, gold-accented, animated burger→X ===== */
.navbar-toggler {
width: 46px; height: 46px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--imp-gold-2) 35%, var(--line));
border-radius: 12px;
background: linear-gradient(
160deg,
color-mix(in srgb, var(--surface) 92%, transparent) 0%,
color-mix(in srgb, var(--bg-alt) 96%, transparent) 100%
);
box-shadow:
0 4px 12px color-mix(in srgb, var(--imp-gold) 12%, transparent),
inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
color: var(--ink);
display: inline-flex; align-items: center; justify-content: center;
position: relative;
cursor: pointer;
transition:
transform .35s var(--ease-spring),
box-shadow .35s var(--ease),
border-color .35s var(--ease),
background .35s var(--ease);
}
.navbar-toggler:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--imp-gold) 65%, var(--line));
box-shadow:
0 8px 20px color-mix(in srgb, var(--imp-gold) 25%, transparent),
inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent);
}
.navbar-toggler:active { transform: translateY(0) scale(.97); }
.navbar-toggler:focus { box-shadow:
0 0 0 3px color-mix(in srgb, var(--imp-gold-2) 35%, transparent),
0 4px 12px color-mix(in srgb, var(--imp-gold) 18%, transparent);
}
[data-bs-theme="dark"] .navbar-toggler {
background: linear-gradient(
160deg,
color-mix(in srgb, var(--imp-ink-3) 80%, transparent) 0%,
color-mix(in srgb, var(--imp-ink-2) 80%, transparent) 100%
);
}
/* Burger custom — 3 líneas (top, middle vía box-shadow, bottom) que
se transforman en X al abrir. `.navbar-toggler-icon` actúa como
wrapper sin estilos visibles; las líneas viven en ::before / ::after */
.navbar-toggler-icon {
background-image: none !important;
width: 22px; height: 16px;
position: relative;
display: block;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 2px;
border-radius: 2px;
background: var(--ink);
transition:
transform .4s var(--ease-spring),
top .4s var(--ease-spring),
bottom .4s var(--ease-spring),
box-shadow .25s var(--ease),
background .35s var(--ease),
width .35s var(--ease);
}
.navbar-toggler-icon::before {
top: 0;
/* La "línea del medio" se simula con box-shadow del ::before — así
evitamos necesitar un tercer elemento y la animación queda limpia */
box-shadow: 0 7px 0 var(--ink);
}
.navbar-toggler-icon::after {
bottom: 0;
width: 16px; /* asimetría editorial: línea inferior más corta */
}
/* Hover — tinte dorado en las 3 líneas, completa la inferior */
.navbar-toggler:hover .navbar-toggler-icon::before,
.navbar-toggler:hover .navbar-toggler-icon::after {
background: linear-gradient(90deg, var(--imp-gold), var(--imp-amber));
}
.navbar-toggler:hover .navbar-toggler-icon::before {
box-shadow: 0 7px 0 var(--imp-amber);
}
.navbar-toggler:hover .navbar-toggler-icon::after { width: 22px; }
/* Expanded — burger se transforma en X elegante:
• top desciende a 7 (centro) y rota +45°
• bottom asciende a 7 (centro) y rota -45°
• middle (box-shadow) desaparece */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
top: 7px;
transform: rotate(45deg);
box-shadow: 0 0 0 transparent;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
bottom: 7px;
width: 22px;
transform: rotate(-45deg);
}
/* Mobile collapse panel */
@media (max-width: 991.98px) {
.navbar.imp-nav {
background: color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.navbar.imp-nav .navbar-collapse {
background: var(--surface);
border-radius: var(--radius);
padding: 16px 18px;
margin-top: 14px;
box-shadow: var(--shadow-1);
}
.navbar.imp-nav .nav-link::after { display: none; }
}
/* ---------- HERO ---------- */
.hero {
padding: clamp(120px, 18vw, 170px) 0 clamp(60px, 8vw, 100px);
position: relative;
overflow: hidden;
min-height: 92vh;
display: flex;
align-items: center;
}
.hero .hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero .hero-bg .glow {
position: absolute;
width: clamp(340px, 60vw, 720px);
height: clamp(340px, 60vw, 720px);
border-radius: 50%;
filter: blur(110px);
opacity: .55;
animation: floatGlow 18s ease-in-out infinite;
}
.hero .hero-bg .glow.g1 {
background: radial-gradient(circle at center, var(--imp-flame), transparent 60%);
top: -180px; right: -120px;
}
.hero .hero-bg .glow.g2 {
background: radial-gradient(circle at center, var(--imp-gold), transparent 60%);
bottom: -200px; left: -180px;
animation-delay: -9s;
}
@keyframes floatGlow {
0%,100% { transform: translateY(0) scale(1); opacity: .55; }
50% { transform: translateY(-40px) scale(1.06); opacity: .7; }
}
.hero .hero-bg .particles { position: absolute; inset: 0; pointer-events: none; }
.hero .hero-bg .particles span {
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
opacity: .4;
animation: particleFloat 12s linear infinite;
filter: blur(1px);
}
.hero .hero-bg .particles span:nth-child(1) { left: 10%; top: 80%; width: 4px; height: 4px; animation-duration: 14s; }
.hero .hero-bg .particles span:nth-child(2) { left: 30%; top: 60%; width: 8px; height: 8px; animation-duration: 18s; animation-delay: -3s; }
.hero .hero-bg .particles span:nth-child(3) { left: 60%; top: 90%; width: 3px; height: 3px; animation-duration: 16s; animation-delay: -6s; }
.hero .hero-bg .particles span:nth-child(4) { left: 80%; top: 70%; width: 5px; height: 5px; animation-duration: 20s; animation-delay: -2s; }
.hero .hero-bg .particles span:nth-child(5) { left: 45%; top: 85%; width: 6px; height: 6px; animation-duration: 22s; animation-delay: -9s; }
.hero .hero-bg .particles span:nth-child(6) { left: 20%; top: 50%; width: 4px; height: 4px; animation-duration: 17s; animation-delay: -5s; }
.hero .hero-bg .particles span:nth-child(7) { left: 90%; top: 40%; width: 7px; height: 7px; animation-duration: 24s; animation-delay: -12s; }
@keyframes particleFloat {
0% { transform: translateY(0) translateX(0); opacity: 0; }
10% { opacity: .4; }
90% { opacity: .4; }
100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
}
.hero .container { position: relative; z-index: 2; }
.hero h1 {
font-size: clamp(2.2rem, 8vw, 5.6rem);
font-weight: 700;
line-height: 1.02;
margin-bottom: 1.25rem;
letter-spacing: -0.03em;
}
.hero h1 .accent-word {
font-style: italic;
background: var(--grad-gold);
background-size: 200% 200%;
-webkit-background-clip: text; background-clip: text;
color: transparent;
padding-right: 6px;
animation: gradShift 8s ease infinite;
}
.hero .lead {
max-width: 540px;
font-size: clamp(1rem, 1.6vw, 1.15rem);
line-height: 1.7;
}
/* Hero stats — responsive grid */
.hero-stats {
margin-top: clamp(36px, 6vw, 64px);
padding-top: clamp(24px, 4vw, 36px);
border-top: 1px solid var(--line);
}
.hero-stats > [class*="col-"] { min-width: 0; } /* permite a flex/grid encoger correctamente */
.hero-stats .stat-num {
font-family: var(--ff-serif);
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 700;
background: var(--grad-gold);
-webkit-background-clip: text; background-clip: text;
color: transparent;
line-height: 1;
font-feature-settings:'tnum' 1;
letter-spacing: -0.02em;
}
.hero-stats .stat-label {
font-family: var(--ff-mono);
/* Tamaño más adaptable + tracking menor para que "Paralímpicos" no se desborde
en desktops estrechos (≈1024–1280) donde cada columna mide ~140px */
font-size: clamp(.58rem, 1.05vw, .7rem);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-top: 8px;
line-height: 1.45;
overflow-wrap: anywhere; /* fallback si una palabra excede el ancho */
hyphens: auto;
text-wrap: pretty;
}
/* Book cover with parallax + 3D */
.book-wrap {
position: relative;
perspective: 1400px;
display: flex; justify-content: center; align-items: center;
min-height: clamp(360px, 50vh, 580px);
}
.book-shape {
position: relative;
width: min(360px, 78vw);
aspect-ratio: 2 / 3;
transform-style: preserve-3d;
transform: rotateY(-14deg) rotateX(4deg);
transition: transform .9s var(--ease);
will-change: transform;
}
.book-shape:hover { transform: rotateY(-4deg) rotateX(0deg) scale(1.02); }
.book-shape .cover {
position: absolute; inset: 0;
border-radius: 4px 10px 10px 4px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: var(--shadow-glow), -10px 16px 50px rgba(0,0,0,.45), -2px 0 6px rgba(0,0,0,.25);
overflow: hidden;
}
.book-shape .cover::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.12) 50%, rgba(255,255,255,0) 60%);
pointer-events: none;
animation: bookShine 6s ease-in-out infinite;
}
@keyframes bookShine {
0%,100% { transform: translateX(-30%); opacity: 0; }
50% { transform: translateX(30%); opacity: 1; }
}
.book-shape .spine {
position: absolute; left: 0; top: 1%;
width: 18px; height: 98%;
background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.1));
transform: translateX(-9px) rotateY(-90deg);
transform-origin: right center;
}
.book-shape .pages {
position: absolute; right: 0; top: 1.5%;
width: 14px; height: 97%;
background: repeating-linear-gradient(90deg, #ece2ce 0 1px, #d9cfb6 1px 2px);
transform: translateX(7px) rotateY(90deg);
transform-origin: left center;
border-radius: 0 2px 2px 0;
box-shadow: inset 0 -10px 20px rgba(0,0,0,.15);
}
.book-shape.floating { animation: bookFloat 7s ease-in-out infinite; }
@keyframes bookFloat {
0%,100% { transform: rotateY(-14deg) rotateX(4deg) translateY(0); }
50% { transform: rotateY(-12deg) rotateX(2deg) translateY(-22px); }
}
.book-ribbon {
position: absolute;
top: clamp(18px, 4vw, 28px);
right: -14px;
z-index: 4;
background: var(--imp-flame);
color: #fff;
font-family: var(--ff-mono);
font-size: .68rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 7px 18px;
box-shadow: 0 8px 20px color-mix(in srgb, var(--imp-flame) 50%, transparent);
}
.book-ribbon::after {
content: ""; position: absolute;
right: 0; bottom: -10px;
border-style: solid;
border-width: 0 0 10px 14px;
border-color: transparent transparent transparent #8a3717;
}
/* Scroll indicator — anclado a la derecha (bajo el libro) para no superponerse
con la cuarta tarjeta de stats en desktops estrechos (≈1024–1280px) */
.scroll-cue {
position: absolute;
bottom: 30px;
right: clamp(22px, 4vw, 56px);
left: auto;
transform: none;
font-family: var(--ff-mono);
font-size: .68rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--muted);
display: flex; flex-direction: column; align-items: center; gap: 10px;
z-index: 3;
}
/* En desktops anchos (≥1600px) hay espacio de sobra: vuelve a centrarlo */
@media (min-width: 1600px) {
.scroll-cue {
left: 50%;
right: auto;
transform: translateX(-50%);
}
}
.scroll-cue .line {
width: 1px; height: 50px;
background: linear-gradient(to bottom, transparent, var(--accent));
position: relative;
}
.scroll-cue .line::after {
content: ""; position: absolute;
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
left: 50%; transform: translateX(-50%);
top: 0;
animation: scrollDrop 2.4s var(--ease) infinite;
box-shadow: 0 0 10px var(--accent);
}
@keyframes scrollDrop {
0% { top: 0; opacity: 1; }
70% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
@media (max-width: 991.98px) { .scroll-cue { display: none; } }
/* ---------- BUTTONS (Premium) ---------- */
.btn-imp {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 26px;
border-radius: 999px;
font-family: var(--ff-sans);
font-size: .82rem;
font-weight: 600;
letter-spacing: 0.08em;
transition: all .4s var(--ease);
border: 1px solid transparent;
text-transform: uppercase;
position: relative;
overflow: hidden;
will-change: transform;
cursor: pointer;
white-space: nowrap;
}
@media (min-width: 576px) { .btn-imp { padding: 15px 32px; font-size: .86rem; } }
.btn-imp::before {
content: ""; position: absolute; inset: 0;
border-radius: 999px;
opacity: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25), transparent 70%);
transform: translateX(-100%);
transition: transform .8s var(--ease);
}
.btn-imp:hover::before { transform: translateX(100%); opacity: 1; }
.btn-imp-primary {
background: var(--grad-gold-2); color: #fff;
box-shadow: 0 14px 30px color-mix(in srgb, var(--imp-flame) 35%, transparent);
}
.btn-imp-primary:hover {
transform: translateY(-3px); color: #fff;
box-shadow: 0 20px 45px color-mix(in srgb, var(--imp-flame) 50%, transparent);
}
.btn-imp-outline {
background: transparent; color: var(--ink); border-color: var(--line);
}
.btn-imp-outline:hover {
background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-3px);
}
[data-bs-theme="dark"] .btn-imp-outline:hover { background: var(--accent); color: var(--imp-ink); border-color: var(--accent); }
.btn-imp-ghost {
background: var(--surface); color: var(--ink); border-color: var(--line);
}
.btn-imp-ghost:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--accent); }
/* ---------- PRESS STRIP ---------- */
.press-strip {
background: var(--bg);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: clamp(28px, 4vw, 44px) 0;
}
.press-strip .press-label {
font-family: var(--ff-mono);
font-size: .68rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted);
text-align: center;
}
.press-strip .press-items {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: clamp(20px, 4vw, 60px);
margin-top: 18px;
padding: 0;
list-style: none;
}
.press-strip .press-items li {
font-family: var(--ff-serif);
font-size: clamp(1rem, 2.5vw, 1.55rem);
font-weight: 600;
font-style: italic;
color: var(--ink);
opacity: .55;
transition: all .3s var(--ease);
letter-spacing: -0.01em;
cursor: default;
}
.press-strip .press-items li:hover { opacity: 1; color: var(--accent); transform: translateY(-2px); }
.press-strip .press-items li i { margin-right: 10px; color: var(--accent); }
/* ---------- MARQUEE ---------- */
.marquee {
overflow-x: hidden; /* clip horizontal solo (descenders no se cortan) */
overflow-y: visible;
position: relative;
background: var(--ink);
padding: clamp(22px, 3.5vw, 34px) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
[data-bs-theme="dark"] .marquee { background: var(--bg-alt); }
.marquee-track {
display: flex;
width: max-content;
animation: marqueeMove 36s linear infinite;
gap: clamp(28px, 5vw, 56px);
align-items: center;
line-height: 1.45;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
display: inline-flex; align-items: center;
gap: clamp(14px, 3vw, 24px);
font-family: var(--ff-serif);
font-size: clamp(1.2rem, 3.5vw, 2.4rem);
font-weight: 600;
font-style: italic;
color: var(--bg);
white-space: nowrap;
letter-spacing: -0.01em;
line-height: 1.45; /* deja sitio para descenders italics (p, g, j, í, etc.) */
padding: 2px 0; /* respiración mínima por encima/debajo */
}
[data-bs-theme="dark"] .marquee-item { color: var(--ink); }
.marquee-item .dot {
width: 10px; height: 10px;
background: var(--accent);
border-radius: 50%;
transform: rotate(45deg);
}
@keyframes marqueeMove {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ---------- SYNOPSIS ---------- */
.synopsis { background: var(--bg-alt); position: relative; }
.synopsis::before {
content: "“";
position: absolute;
top: 40px; left: 6%;
font-family: var(--ff-serif);
font-size: clamp(10rem, 30vw, 24rem);
line-height: .7;
color: var(--accent);
opacity: .08;
pointer-events: none;
font-weight: 700;
}
.synopsis-content { max-width: 800px; margin: 0 auto; position: relative; }
.synopsis-content p {
font-family: var(--ff-serif);
font-size: clamp(1.1rem, 2vw, 1.45rem);
line-height: 1.65;
color: var(--ink);
margin-bottom: 1.5rem;
font-weight: 400;
letter-spacing: -0.005em;
}
.synopsis-content p:first-of-type::first-letter {
float: left;
font-family: var(--ff-serif);
font-size: clamp(4rem, 8vw, 5.5rem);
line-height: .9;
padding: 6px 12px 0 0;
background: var(--grad-gold);
-webkit-background-clip: text; background-clip: text; color: transparent;
font-weight: 700;
}
/* ---------- BENEFITS / PILARES ---------- */
.pillar-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(28px, 4vw, 40px) clamp(24px, 3vw, 32px);
transition: all .5s var(--ease);
height: 100%;
position: relative;
overflow: hidden;
}
.pillar-card::before {
content: ""; position: absolute;
top: 0; left: 0; width: 100%; height: 3px;
background: var(--grad-gold-2);
transform: scaleX(0); transform-origin: left;
transition: transform .55s var(--ease);
}
.pillar-card::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%);
opacity: 0; transition: opacity .5s var(--ease);
pointer-events: none;
}
.pillar-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-2);
border-color: transparent;
}
.pillar-card:hover::before { transform: scaleX(1); }
.pillar-card:hover::after { opacity: 1; }
.pillar-icon {
width: 64px; height: 64px;
border-radius: 18px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, color-mix(in srgb, var(--imp-gold) 18%, transparent), color-mix(in srgb, var(--imp-flame) 14%, transparent));
color: var(--accent);
font-size: 1.7rem;
margin-bottom: 22px;
transition: transform .4s var(--ease-spring);
position: relative;
}
.pillar-icon::after {
content: ""; position: absolute; inset: -2px;
border-radius: 20px; padding: 2px;
background: var(--grad-gold);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0; transition: opacity .4s var(--ease);
}
.pillar-card:hover .pillar-icon { transform: rotate(-10deg) scale(1.12); }
.pillar-card:hover .pillar-icon::after { opacity: 1; }
.pillar-card h4 {
font-size: clamp(1.25rem, 2.5vw, 1.55rem);
margin-bottom: 14px;
font-weight: 700;
}
.pillar-card p { margin-bottom: 0; color: var(--ink-soft); font-size: 1rem; }
.pillar-card .pillar-num {
position: absolute;
bottom: 16px; right: 22px;
font-family: var(--ff-serif);
font-size: clamp(3rem, 6vw, 5rem);
line-height: 1; font-weight: 800;
color: var(--accent);
opacity: .06;
pointer-events: none;
font-style: italic;
}
/* ---------- CHAPTERS ---------- */
.chapters { background: var(--bg); position: relative; overflow: hidden; }
.chapters::before, .chapters::after {
content: ""; position: absolute;
width: 320px; height: 320px;
border-radius: 50%; filter: blur(120px);
opacity: .22; pointer-events: none;
}
.chapters::before { background: var(--imp-gold); top: 20%; left: -120px; }
.chapters::after { background: var(--imp-flame); bottom: 10%; right: -120px; }
.chapter-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(24px, 3vw, 32px) clamp(20px, 3vw, 28px);
height: 100%;
position: relative;
transition: all .4s var(--ease);
overflow: hidden;
}
.chapter-card::before {
content: ""; position: absolute;
bottom: -40%; left: -10%;
width: 120%; height: 80%;
background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
opacity: 0; transition: opacity .5s var(--ease);
}
.chapter-card::after {
content: ""; position: absolute; inset: 0;
border-radius: var(--radius); padding: 1px;
background: var(--grad-gold-2);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0; transition: opacity .5s var(--ease);
pointer-events: none;
}
.chapter-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-2);
border-color: transparent;
}
.chapter-card:hover::before { opacity: 1; }
.chapter-card:hover::after { opacity: 1; }
.chapter-num {
font-family: var(--ff-mono);
font-size: .68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
display: block;
margin-bottom: 12px;
font-weight: 500;
}
.chapter-title {
font-size: clamp(1.15rem, 2.2vw, 1.4rem);
margin-bottom: 10px;
font-weight: 600;
position: relative;
}
.chapter-desc {
color: var(--muted);
font-size: .94rem;
margin-bottom: 16px;
position: relative;
}
.chapter-sport {
display: inline-flex; align-items: center; gap: 8px;
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
font-family: var(--ff-mono);
font-size: .68rem;
font-weight: 500;
letter-spacing: 0.1em;
padding: 5px 12px;
border-radius: 999px;
text-transform: uppercase;
position: relative;
}
/* ---------- CV section (iframe desktop + native preview mobile) ---------- */
.cv-section {
background: var(--bg-alt);
position: relative;
overflow: hidden;
}
.cv-section::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(40% 30% at 10% 20%, color-mix(in srgb, var(--imp-gold) 16%, transparent), transparent 70%),
radial-gradient(40% 30% at 90% 80%, color-mix(in srgb, var(--imp-flame) 14%, transparent), transparent 70%);
pointer-events: none;
}
.cv-section > .container, .cv-section .cv-container { position: relative; z-index: 2; }
.cv-section .cv-container {
width: 100%;
max-width: 1380px;
margin: 0 auto;
padding-left: clamp(16px, 3vw, 24px); padding-right: clamp(16px, 3vw, 24px);
}
/* Desktop iframe wrapper */
.cv-frame-wrap {
position: relative;
border-radius: 24px;
padding: 2px;
background: var(--grad-gold);
box-shadow: var(--shadow-3);
margin-top: 50px;
}
.cv-frame-inner {
position: relative;
border-radius: 22px;
overflow: hidden;
background: var(--surface);
}
.cv-frame-toolbar {
display: flex; align-items: center; gap: 10px;
padding: 12px 18px;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.cv-frame-toolbar .cv-dot { width: 12px; height: 12px; border-radius: 50%; }
.cv-frame-toolbar .cv-dot.r { background: #ff5f57; }
.cv-frame-toolbar .cv-dot.y { background: #febc2e; }
.cv-frame-toolbar .cv-dot.g { background: #28c840; }
.cv-frame-toolbar .cv-url {
margin-left: 14px;
font-family: var(--ff-mono);
font-size: .76rem;
color: var(--muted);
background: var(--bg);
padding: 5px 14px;
border-radius: 999px;
border: 1px solid var(--line);
display: inline-flex; align-items: center; gap: 8px;
flex-grow: 1; justify-content: center;
max-width: 380px;
}
.cv-frame-toolbar .cv-url i { color: var(--accent); }
.cv-frame-toolbar .cv-fullscreen {
margin-left: auto;
background: transparent;
border: 1px solid var(--line);
color: var(--ink);
font-family: var(--ff-mono);
font-size: .68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 8px 16px;
border-radius: 999px;
cursor: pointer;
transition: all .25s var(--ease);
display: inline-flex; align-items: center; gap: 8px;
}
.cv-frame-toolbar .cv-fullscreen:hover {
background: var(--ink); color: var(--bg); border-color: var(--ink);
}
[data-bs-theme="dark"] .cv-frame-toolbar .cv-fullscreen:hover { background: var(--accent); color: var(--imp-ink); border-color: var(--accent); }
.cv-iframe {
display: block;
width: 100%;
height: 1020px;
border: 0;
background: var(--surface);
}
/* Mobile/tablet native CV card preview */
.cv-preview-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-2);
margin-top: 40px;
}
.cv-preview-card .cv-cover {
background: linear-gradient(160deg, var(--imp-ink) 0%, #1c2a3e 100%);
padding: clamp(28px, 5vw, 44px);
position: relative;
overflow: hidden;
color: #f1ece1;
}
.cv-preview-card .cv-cover::before {
content: ""; position: absolute;
top: -80px; right: -80px;
width: 240px; height: 240px;
border-radius: 50%;
background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 50%, transparent), transparent 70%);
opacity: .6;
}
.cv-preview-card .cv-avatar {
width: 100px; height: 100px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--imp-gold-2);
box-shadow: 0 10px 24px rgba(0,0,0,.35);
position: relative;
z-index: 1;
}
.cv-preview-card .cv-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.cv-preview-card .cv-cover h3 {
color: #fff; font-size: clamp(1.4rem, 4vw, 1.9rem);
margin: 18px 0 6px; position: relative; z-index: 1;
}
.cv-preview-card .cv-cover .cv-role {
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: 0.22em;
color: var(--imp-gold-2);
text-transform: uppercase;
position: relative; z-index: 1;
}
.cv-preview-card .cv-cover p {
color: #cfc7b6;
margin: 14px 0 0;
position: relative; z-index: 1;
font-size: .95rem;
}
.cv-preview-card .cv-body { padding: clamp(24px, 4vw, 36px); }
.cv-list { list-style: none; padding: 0; margin: 0; }
.cv-list li {
display: flex; gap: 12px; align-items: flex-start;
padding: 10px 0;
border-bottom: 1px dashed var(--line);
font-size: .95rem;
color: var(--ink-soft);
}
.cv-list li:last-child { border-bottom: 0; }
.cv-list li i {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 14%, transparent);
width: 28px; height: 28px; flex-shrink: 0;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: .82rem;
}
.cv-list li strong { color: var(--ink); margin-right: 4px; }
.cv-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
font-family: var(--ff-mono);
font-size: .7rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.cv-mini-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 14px;
text-align: center;
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid var(--line);
}
.cv-mini-stats .n {
font-family: var(--ff-serif);
font-size: clamp(1.4rem, 4vw, 1.8rem);
font-weight: 700;
line-height: 1;
background: var(--grad-gold);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.cv-mini-stats .l {
font-family: var(--ff-mono);
font-size: .66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin-top: 6px;
}
/* Fullscreen for iframe */
.cv-section.fullscreen {
position: fixed; inset: 0; z-index: 9999;
padding: 0; background: var(--ink);
}
.cv-section.fullscreen .container,
.cv-section.fullscreen .cv-container { max-width: none; padding: 0; }
.cv-section.fullscreen .cv-section-head { display: none; }
.cv-section.fullscreen .cv-frame-wrap { margin-top: 0; border-radius: 0; height: 100vh; }
.cv-section.fullscreen .cv-frame-inner { border-radius: 0; height: 100%; display: flex; flex-direction: column; }
.cv-section.fullscreen .cv-iframe { height: 100%; flex: 1; }
/* ---------- AUTHOR (Native premium CV) ---------- */
.author {
background: var(--bg-alt);
position: relative;
overflow: hidden;
}
.author::before, .author::after {
content: ""; position: absolute;
width: 480px; height: 480px;
border-radius: 50%;
filter: blur(130px);
opacity: .22;
pointer-events: none;
z-index: 0;
}
.author::before { background: var(--imp-gold); top: 10%; right: -160px; }
.author::after { background: var(--imp-flame); bottom: 5%; left: -160px; }
.author > .container { position: relative; z-index: 2; }
/* PHOTO + decorative frame */
.author-photo-wrap {
position: relative;
max-width: 460px;
margin: 0 auto;
padding: 30px 30px 50px;
perspective: 1200px;
}
.author-photo-wrap .photo-frame {
position: relative;
z-index: 3;
border-radius: 22px 22px 22px 110px;
overflow: hidden;
background: var(--surface);
aspect-ratio: 4 / 5;
box-shadow: var(--shadow-3), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
transform: rotateY(-4deg) rotateX(2deg);
transition: transform 1s var(--ease), box-shadow .6s var(--ease);
will-change: transform;
}
.author-photo-wrap:hover .photo-frame {
transform: rotateY(-1deg) rotateX(0deg) scale(1.02);
box-shadow: var(--shadow-3), 0 0 0 1px var(--accent), 0 50px 100px color-mix(in srgb, var(--imp-flame) 25%, transparent);
}
.author-photo-wrap .photo-frame img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 15%;
transition: transform 1.4s var(--ease), filter .8s var(--ease);
filter: saturate(.92) contrast(1.02);
}
.author-photo-wrap:hover .photo-frame img {
transform: scale(1.06);
filter: saturate(1.05) contrast(1.05);
}
/* Top-left frame outline (echo) */
.author-photo-wrap .deco-frame {
position: absolute;
top: 0; left: 0;
width: calc(100% - 60px);
height: calc(100% - 80px);
border: 2px solid var(--accent);
border-radius: 22px 22px 22px 110px;
z-index: 1;
opacity: .35;
transition: all .8s var(--ease);
}
.author-photo-wrap:hover .deco-frame {
top: 10px; left: 10px;
opacity: .6;
border-color: var(--imp-flame);
}
/* Dot pattern decoration */
.author-photo-wrap .deco-dots {
position: absolute;
bottom: 10px; right: 0;
width: 130px; height: 130px;
background-image: radial-gradient(circle at center, var(--accent) 1px, transparent 1.5px);
background-size: 12px 12px;
opacity: .5;
z-index: 0;
transition: opacity .5s var(--ease), transform .8s var(--ease);
}
.author-photo-wrap:hover .deco-dots { opacity: .8; transform: translate(6px, 6px); }
/* Animated golden circle */
.author-photo-wrap .deco-circle {
position: absolute;
top: 8px; right: 8px;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--grad-gold);
z-index: 4;
box-shadow: 0 14px 32px color-mix(in srgb, var(--imp-flame) 50%, transparent), inset 0 -8px 16px rgba(0,0,0,.15);
animation: floatBadge 6s ease-in-out infinite;
}
.author-photo-wrap .deco-circle::after {
content: ""; position: absolute; inset: -8px;
border-radius: 50%;
border: 1.5px solid var(--accent);
opacity: .5;
animation: ringPulse 3s ease-out infinite;
}
@keyframes floatBadge {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes ringPulse {
0% { transform: scale(.9); opacity: .5; }
100% { transform: scale(1.5); opacity: 0; }
}
/* Floating role badge */
.author-photo-wrap .deco-badge {
position: absolute;
bottom: -10px; left: -10px;
z-index: 5;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
padding: 12px 16px;
display: inline-flex; align-items: center; gap: 10px;
box-shadow: var(--shadow-2);
transition: all .4s var(--ease);
}
.author-photo-wrap:hover .deco-badge {
transform: translate(-6px, -6px) rotate(-3deg);
box-shadow: var(--shadow-3);
}
.author-photo-wrap .deco-badge .badge-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #29c844;
box-shadow: 0 0 0 4px color-mix(in srgb, #29c844 30%, transparent);
animation: dotPulse 2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes dotPulse {
0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, #29c844 30%, transparent); }
50% { box-shadow: 0 0 0 8px color-mix(in srgb, #29c844 5%, transparent); }
}
.author-photo-wrap .deco-badge .badge-text {
font-family: var(--ff-mono);
font-size: .68rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
line-height: 1.3;
}
.author-photo-wrap .deco-badge .badge-text small {
display: block;
color: var(--muted);
letter-spacing: 0.1em;
font-size: .6rem;
margin-top: 2px;
}
/* Content side */
.author-role {
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
display: inline-block;
}
.author-name {
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 700;
margin-bottom: 18px;
line-height: 1.05;
}
.author-name em {
font-style: italic;
background: var(--grad-gold);
background-size: 200% 200%;
-webkit-background-clip: text; background-clip: text;
color: transparent;
animation: gradShift 8s ease infinite;
font-weight: 700;
}
.author-bio {
color: var(--ink-soft);
font-size: clamp(.98rem, 1.4vw, 1.05rem);
line-height: 1.75;
margin-bottom: 1rem;
}
.author-bio strong { color: var(--ink); font-weight: 600; }
/* Checks list */
.author-checks {
list-style: none; padding: 0; margin: 24px 0 0;
}
.author-checks li {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 9px 0;
color: var(--ink);
font-size: .96rem;
opacity: 0;
transform: translateX(-12px);
transition: opacity .6s var(--ease), transform .6s var(--ease);
transition-delay: var(--delay, 0s);
}
.author-checks.in li { opacity: 1; transform: translateX(0); }
.author-checks li i {
color: #fff;
background: var(--grad-gold-2);
width: 26px; height: 26px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: .8rem;
box-shadow: 0 6px 14px color-mix(in srgb, var(--imp-flame) 35%, transparent);
transition: transform .35s var(--ease-spring);
}
.author-checks li:hover i { transform: rotate(360deg) scale(1.08); }
/* Author socials */
.author-socials {
display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap;
}
.author-socials a {
width: 44px; height: 44px;
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface);
border: 1px solid var(--line);
color: var(--ink);
font-size: 1.05rem;
transition: all .35s var(--ease-spring);
}
.author-socials a:hover {
background: var(--grad-gold-2);
color: #fff;
border-color: transparent;
transform: translateY(-4px) rotate(-6deg);
box-shadow: 0 14px 28px color-mix(in srgb, var(--imp-flame) 40%, transparent);
}
/* Author stats (big numbers row) */
.author-stats {
margin-top: clamp(48px, 6vw, 70px);
padding: clamp(28px, 4vw, 36px) clamp(24px, 4vw, 40px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.author-stats::before {
content: ""; position: absolute;
top: 0; left: 0; height: 4px; width: 100%;
background: var(--grad-gold);
}
.author-stats .a-stat {
text-align: center;
padding: 12px 6px;
position: relative;
transition: transform .35s var(--ease);
cursor: default;
}
.author-stats .a-stat:hover { transform: translateY(-4px); }
.author-stats .a-stat:not(:last-child)::after {
content: ""; position: absolute;
top: 15%; right: 0; bottom: 15%;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--line), transparent);
}
@media (max-width: 575.98px) {
.author-stats .a-stat:not(:last-child)::after { display: none; }
.author-stats .a-stat:not(:last-child) { border-bottom: 1px solid var(--line); }
.author-stats .a-stat:last-child { padding-bottom: 0; }
.author-stats .a-stat:first-child { padding-top: 0; }
}
.author-stats .a-stat .n {
font-family: var(--ff-serif);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
line-height: 1;
background: var(--grad-gold);
-webkit-background-clip: text; background-clip: text;
color: transparent;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.02em;
display: block;
}
.author-stats .a-stat .l {
font-family: var(--ff-mono);
/* Mismo principio que .hero-stats .stat-label: evita overflow con labels
largas ("Paralimpiadas cubiertas", "Capítulos en Imparables") en
desktops estrechos */
font-size: clamp(.58rem, 1.05vw, .7rem);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-top: 10px;
line-height: 1.45;
overflow-wrap: anywhere;
hyphens: auto;
text-wrap: pretty;
}
/* Pull quote (large italic) */
.author-pull {
font-family: var(--ff-serif);
font-style: italic;
font-size: clamp(1.3rem, 2.8vw, 2rem);
line-height: 1.4;
color: var(--ink);
max-width: 760px;
margin: clamp(48px, 6vw, 70px) auto 0;
text-align: center;
position: relative;
padding: 0 30px;
}
.author-pull::before, .author-pull::after {
font-family: var(--ff-serif);
font-size: 3rem;
line-height: 0;
background: var(--grad-gold);
-webkit-background-clip: text; background-clip: text;
color: transparent;
font-weight: 700;
position: absolute;
}
.author-pull::before { content: "“"; left: 0; top: .4em; }
.author-pull::after { content: "”"; right: 0; bottom: -.2em; }
/* Timeline (premium) */
.author-timeline-wrap {
margin-top: clamp(48px, 6vw, 80px);
}
.author-timeline-wrap .timeline-head {
text-align: center;
margin-bottom: clamp(28px, 4vw, 44px);
}
.author-timeline-wrap .timeline-head h3 {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 700;
}
.author-timeline-wrap .timeline-head .timeline-sub {
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
}
.author-timeline {
position: relative;
list-style: none;
padding: 0;
margin: 0;
}
/* Center vertical line on desktop */
@media (min-width: 768px) {
.author-timeline::before {
content: ""; position: absolute;
left: 50%; top: 0; bottom: 0;
width: 2px;
background: linear-gradient(to bottom, transparent, var(--accent), transparent);
transform: translateX(-50%);
}
}
.author-timeline-item {
position: relative;
padding: clamp(14px, 2vw, 18px) 0;
display: flex;
gap: 20px;
}
/* Alternate sides on desktop */
@media (min-width: 768px) {
.author-timeline-item {
width: 50%;
padding-right: 36px;
padding-left: 0;
}
.author-timeline-item:nth-child(even) {
margin-left: 50%;
padding-right: 0;
padding-left: 36px;
}
}
/* Dot */
.author-timeline-item::before {
content: ""; position: absolute;
top: 24px;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--bg-alt);
border: 2px solid var(--accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
transition: all .4s var(--ease-spring);
z-index: 2;
}
@media (max-width: 767.98px) {
.author-timeline { padding-left: 32px; }
.author-timeline::before {
content: ""; position: absolute;
left: 6px; top: 0; bottom: 0;
width: 2px;
background: linear-gradient(to bottom, transparent, var(--accent), transparent);
}
.author-timeline-item::before { left: -32px; top: 26px; }
}
@media (min-width: 768px) {
.author-timeline-item::before { right: -7px; }
.author-timeline-item:nth-child(even)::before { right: auto; left: -7px; }
}
.author-timeline-item:hover::before {
background: var(--accent);
box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent);
transform: scale(1.15);
}
.author-timeline-item .tl-card {
flex: 1;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(18px, 2.5vw, 24px);
box-shadow: var(--shadow-1);
transition: all .4s var(--ease);
position: relative;
}
.author-timeline-item:hover .tl-card {
transform: translateY(-4px);
box-shadow: var(--shadow-2);
border-color: transparent;
}
.author-timeline-item .tl-year {
display: inline-block;
font-family: var(--ff-mono);
font-size: .68rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
background: var(--grad-gold-2);
color: #fff;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 10px;
}
.author-timeline-item .tl-role {
font-family: var(--ff-serif);
font-size: clamp(1.05rem, 2vw, 1.2rem);
font-weight: 600;
color: var(--ink);
margin: 0 0 4px;
}
.author-timeline-item .tl-company {
font-size: .85rem;
color: var(--accent);
font-weight: 500;
margin-bottom: 8px;
}
.author-timeline-item .tl-desc {
color: var(--ink-soft);
font-size: .9rem;
line-height: 1.6;
margin: 0;
}
/* CTA button to open full CV in new tab */
.author-cta-row {
margin-top: clamp(36px, 5vw, 50px);
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
/* ---------- QUOTES ---------- */
.quotes { background: var(--bg); position: relative; }
.quote-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(32px, 5vw, 50px) clamp(24px, 5vw, 44px);
text-align: center;
max-width: 820px;
margin: 0 auto;
position: relative;
box-shadow: var(--shadow-1);
}
.quote-card .qmark {
font-family: var(--ff-serif);
font-size: clamp(3.6rem, 8vw, 6rem);
line-height: 1;
background: var(--grad-gold);
-webkit-background-clip: text; background-clip: text;
color: transparent;
margin-bottom: -24px;
font-weight: 700;
}
.quote-card .qtext {
font-family: var(--ff-serif);
font-size: clamp(1.05rem, 2vw, 1.45rem);
line-height: 1.55;
color: var(--ink);
font-style: italic;
margin: 20px 0 28px;
font-weight: 400;
}
.quote-card .qauthor {
font-family: var(--ff-mono);
font-size: .76rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
}
.quote-card .qrole { font-size: .88rem; color: var(--muted); margin-top: 6px; }
.carousel-control-prev,.carousel-control-next { width: 50px; opacity: .75; }
.carousel-control-prev:hover,.carousel-control-next:hover { opacity: 1; }
.carousel-control-prev-icon,.carousel-control-next-icon {
background-color: var(--accent);
border-radius: 50%;
padding: 22px;
background-size: 50%;
}
.carousel-indicators [data-bs-target] {
width: 30px; height: 3px;
border-radius: 0;
background-color: var(--muted);
border: none; opacity: .4;
}
.carousel-indicators .active { background-color: var(--accent); opacity: 1; }
/* ---------- EVENTS ---------- */
.events { background: var(--bg-alt); }
.event-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(24px, 3vw, 32px) clamp(22px, 3vw, 28px);
transition: all .4s var(--ease);
height: 100%;
}
.event-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-2); border-color: transparent; }
.event-date { font-family: var(--ff-serif); font-weight: 800; line-height: 1; }
.event-date .day {
display: block;
font-size: clamp(2.8rem, 7vw, 4.2rem);
background: var(--grad-gold);
-webkit-background-clip: text; background-clip: text;
color: transparent;
font-style: italic;
letter-spacing: -0.03em;
}
.event-date .month {
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink);
font-weight: 500;
margin-top: 6px;
display: inline-block;
}
.event-title {
font-size: clamp(.95rem, 1.8vw, 1.1rem);
margin: 18px 0 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 700;
color: var(--ink);
font-family: var(--ff-sans);
}
.event-desc { font-size: .92rem; color: var(--ink-soft); margin: 0 0 16px; }
.event-link {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--ff-mono);
font-size: .68rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
}
.event-link i { transition: transform .3s var(--ease); }
.event-link:hover i { transform: translateX(5px); }
/* ---------- BUY THE BOOK ---------- */
.buy-section { background: var(--bg); position: relative; overflow: hidden; }
.buy-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(20px, 3vw, 32px);
text-align: center;
transition: all .4s var(--ease);
height: 100%;
position: relative;
overflow: hidden;
}
.buy-card::before {
content: ""; position: absolute;
inset: -2px;
border-radius: var(--radius);
background: var(--grad-gold);
z-index: -1;
opacity: 0;
transition: opacity .4s var(--ease);
}
.buy-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-2); border-color: transparent; }
.buy-icon {
width: 56px; height: 56px;
margin: 0 auto 16px;
border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
font-size: 1.5rem;
}
.buy-card h5 {
font-size: 1.1rem;
margin-bottom: 6px;
font-weight: 700;
}
.buy-card .buy-format {
font-family: var(--ff-mono);
font-size: .68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 12px;
}
.buy-card .buy-price {
font-family: var(--ff-serif);
font-size: 1.8rem;
font-weight: 700;
background: var(--grad-gold);
-webkit-background-clip: text; background-clip: text;
color: transparent;
letter-spacing: -0.02em;
}
.buy-card .buy-price small { font-size: .9rem; font-weight: 400; opacity: .7; }
.buy-card .buy-link {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 14px;
font-family: var(--ff-mono);
font-size: .68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
font-weight: 500;
}
.buy-card .buy-link i { transition: transform .3s var(--ease); }
.buy-card:hover .buy-link i { transform: translateX(4px); }
/* ---------- BUY CARD · MOBILE compacto (xs <576px) ----------
Convierte el layout vertical en horizontal: icono a la izquierda,
título + formato + precio + CTA apilados en columna derecha.
Reduce padding y tamaños para ocupar ~½ del alto previo */
@media (max-width: 575.98px) {
.buy-card {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
column-gap: 14px;
row-gap: 2px;
padding: 14px 16px;
text-align: left;
align-items: center;
}
.buy-card .buy-icon {
grid-column: 1; grid-row: 1 / span 2;
width: 48px; height: 48px;
margin: 0;
border-radius: 12px;
font-size: 1.25rem;
align-self: center;
}
.buy-card h5 {
grid-column: 2; grid-row: 1;
font-size: 1rem;
margin: 0;
line-height: 1.2;
}
.buy-card .buy-format {
grid-column: 2; grid-row: 2;
margin: 0;
font-size: .58rem;
letter-spacing: 0.14em;
line-height: 1.3;
}
.buy-card .buy-price {
grid-column: 3; grid-row: 1;
font-size: 1.25rem;
line-height: 1;
align-self: end;
}
.buy-card .buy-price small { font-size: .7rem; }
.buy-card .buy-link {
grid-column: 3; grid-row: 2;
margin: 0;
font-size: .58rem;
letter-spacing: 0.14em;
justify-self: end;
align-self: start;
}
/* Sin elevación grande al tap en mobile — solo feedback sutil */
.buy-card:hover, .buy-card:active { transform: translateY(-2px); }
}
/* ---------- BUY CARD · TABLET (sm 576px–991.98px) ----------
2 cards por fila ya por Bootstrap (col-sm-6). Reducimos padding
e icono para que ocupen menos alto */
@media (min-width: 576px) and (max-width: 991.98px) {
.buy-card { padding: 22px 20px; }
.buy-card .buy-icon {
width: 48px; height: 48px;
margin-bottom: 12px;
font-size: 1.3rem;
}
.buy-card h5 { font-size: 1.02rem; margin-bottom: 4px; }
.buy-card .buy-format { margin-bottom: 8px; }
.buy-card .buy-price { font-size: 1.5rem; }
.buy-card .buy-link { margin-top: 10px; }
}
/* ---------- FAQ ---------- */
.faq { background: var(--bg); }
.faq .accordion {
max-width: 820px;
margin: 0 auto;
--bs-accordion-bg: transparent;
--bs-accordion-active-bg: transparent;
--bs-accordion-border-color: var(--line);
--bs-accordion-btn-color: var(--ink);
--bs-accordion-active-color: var(--accent);
--bs-accordion-btn-focus-box-shadow: none;
--bs-accordion-border-radius: 0;
}
.faq .accordion-item {
background: transparent;
border-left: 0; border-right: 0;
border-color: var(--line);
}
.faq .accordion-item:first-of-type { border-top: 1px solid var(--line); }
.faq .accordion-button {
background: transparent;
font-family: var(--ff-serif);
font-size: clamp(1.05rem, 2vw, 1.25rem);
font-weight: 600;
padding: 22px 0;
color: var(--ink);
}
.faq .accordion-button:not(.collapsed) { color: var(--accent); }
.faq .accordion-button::after {
background-image: none;
content: "+";
font-family: var(--ff-sans);
font-size: 1.8rem;
font-weight: 200;
width: auto; height: auto;
display: flex; align-items: center; justify-content: center;
transition: transform .35s var(--ease-spring);
color: var(--accent);
}
.faq .accordion-button:not(.collapsed)::after { transform: rotate(45deg); }
.faq .accordion-body {
padding: 0 0 22px;
color: var(--ink-soft);
font-size: 1rem;
line-height: 1.75;
}
/* ---------- CONTACT ---------- */
.contact { background: var(--bg-alt); }
.contact-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(28px, 4vw, 44px) clamp(22px, 3vw, 38px);
height: 100%;
}
.form-floating > label { color: var(--muted); font-family: var(--ff-sans); }
.form-control, .form-control:focus {
background: var(--bg);
border: 1px solid var(--line);
color: var(--ink);
border-radius: var(--radius-sm);
padding: 14px 18px;
transition: all .25s var(--ease);
font-size: .96rem;
font-family: var(--ff-sans);
}
.form-control:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.form-floating > .form-control {
padding-top: 24px; padding-bottom: 8px;
height: auto; min-height: 58px;
}
.form-floating textarea.form-control { min-height: 130px; }
.form-floating > label { padding: 16px 18px; }
.contact-info {
background: linear-gradient(160deg, var(--imp-ink) 0%, #1c2a3e 100%);
color: #f1ece1;
border-radius: var(--radius);
padding: clamp(28px, 4vw, 44px) clamp(22px, 3vw, 36px);
position: relative;
overflow: hidden;
height: 100%;
}
[data-bs-theme="dark"] .contact-info {
background: linear-gradient(160deg, #1d2a3e 0%, var(--imp-ink) 100%);
}
.contact-info::before {
content: ""; position: absolute;
top: -80px; right: -80px;
width: 240px; height: 240px;
border-radius: 50%;
background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 50%, transparent), transparent 70%);
opacity: .6;
}
.contact-info h3 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin-bottom: 6px; font-weight: 600; }
.contact-info .ci-tag {
font-family: var(--ff-mono);
font-size: .68rem;
color: var(--imp-gold-2);
letter-spacing: 0.24em;
text-transform: uppercase;
margin-bottom: 8px;
display: inline-block;
font-weight: 500;
}
.contact-info .info-block { display: flex; gap: 16px; margin: 22px 0; }
.contact-info .info-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: color-mix(in srgb, var(--imp-gold) 18%, transparent);
color: var(--imp-gold-2);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
.contact-info .info-block .label {
font-family: var(--ff-mono);
font-size: .65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--imp-gold-2);
margin-bottom: 4px;
}
.contact-info .info-block .value { color: #f1ece1; font-size: 1rem; }
.contact-info .socials-row { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.contact-info .socials-row a {
width: 42px; height: 42px;
border-radius: 10px;
background: rgba(255,255,255,.07);
color: #f1ece1;
display: inline-flex; align-items: center; justify-content: center;
transition: all .35s var(--ease-spring);
font-size: 1.02rem;
}
.contact-info .socials-row a:hover {
background: var(--grad-gold-2);
transform: translateY(-4px) rotate(-6deg);
}
/* Wide variant (no form column) */
.contact-info-wide {
padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px);
box-shadow: var(--shadow-3);
}
.contact-info-wide h3 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.contact-divider {
border: 0;
border-top: 1px solid rgba(255,255,255,.12);
margin: clamp(28px, 4vw, 40px) 0;
}
.contact-info-wide .socials-row { display: flex; gap: 10px; flex-wrap: wrap; }
/* Big direct-CTA buttons */
.contact-cta-stack { display: flex; flex-direction: column; gap: 12px; }
.contact-cta {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border-radius: 14px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.08);
color: #f1ece1;
text-decoration: none;
transition: all .35s var(--ease);
position: relative;
overflow: hidden;
}
.contact-cta::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12), transparent 70%);
transform: translateX(-100%);
transition: transform .8s var(--ease);
}
.contact-cta:hover {
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.18);
transform: translateY(-3px);
color: #fff;
box-shadow: 0 14px 32px rgba(0,0,0,.25);
}
.contact-cta:hover::before { transform: translateX(100%); }
.contact-cta .cta-icon {
width: 44px; height: 44px;
flex-shrink: 0;
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.2rem;
}
.contact-cta.whatsapp .cta-icon {
background: #25D366;
color: #fff;
box-shadow: 0 8px 20px color-mix(in srgb, #25D366 45%, transparent);
}
.contact-cta.email .cta-icon {
background: var(--grad-gold-2);
color: #fff;
box-shadow: 0 8px 20px color-mix(in srgb, var(--imp-flame) 45%, transparent);
}
.contact-cta .cta-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.contact-cta .cta-label {
font-family: var(--ff-mono);
font-size: .62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--imp-gold-2);
}
.contact-cta .cta-value {
font-size: .92rem;
color: #fff;
font-weight: 500;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact-cta .cta-arrow {
margin-left: auto;
color: var(--imp-gold-2);
font-size: 1rem;
transition: transform .3s var(--ease);
flex-shrink: 0;
}
.contact-cta:hover .cta-arrow { transform: translateX(4px); }
/* ---------- FOOTER ---------- */
.footer-cta {
text-align: center;
padding: clamp(60px, 8vw, 100px) 0;
background: var(--bg);
border-top: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.footer-cta::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--accent) 6%, transparent), transparent);
pointer-events: none;
}
.footer-cta .question {
font-family: var(--ff-serif);
font-size: clamp(1.5rem, 3.5vw, 2.4rem);
color: var(--ink);
margin-bottom: 14px;
font-weight: 600;
}
.footer {
background: var(--bg-alt);
padding: clamp(36px, 5vw, 50px) 0 32px;
border-top: 1px solid var(--line);
}
.footer .navbar-brand { color: var(--ink); }
.footer .footer-nav {
display: flex; flex-wrap: wrap; gap: 22px;
justify-content: center;
}
.footer .footer-nav a {
color: var(--ink-soft);
font-size: .92rem;
font-family: var(--ff-sans);
transition: color .2s var(--ease);
}
.footer .footer-nav a:hover { color: var(--accent); }
.footer .copyright {
text-align: center;
font-size: .8rem;
color: var(--muted);
border-top: 1px solid var(--line);
padding-top: 22px;
margin-top: 30px;
font-family: var(--ff-mono);
letter-spacing: 0.04em;
}
.footer-legal {
text-align: center;
font-size: .75rem;
color: var(--muted);
font-family: var(--ff-mono);
letter-spacing: 0.08em;
display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px;
margin-top: 8px;
}
.footer-legal a {
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: color .25s var(--ease), border-color .25s var(--ease);
}
.footer-legal a:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* ---------- REVEAL ANIMATIONS ---------- */
[data-reveal] {
opacity: 0;
transform: translateY(40px);
transition: opacity 1s var(--ease), transform 1s var(--ease);
will-change: transform, opacity;
}
[data-reveal].in { opacity: 1; transform: translateY(0); }
[data-reveal="left"] { transform: translateX(-50px); }
[data-reveal="left"].in { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(50px); }
[data-reveal="right"].in { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="scale"].in { transform: scale(1); }
[data-reveal="blur"] { filter: blur(8px); }
[data-reveal="blur"].in { filter: blur(0); }
[data-reveal-delay="100"] { transition-delay: .1s; }
[data-reveal-delay="200"] { transition-delay: .2s; }
[data-reveal-delay="300"] { transition-delay: .3s; }
[data-reveal-delay="400"] { transition-delay: .4s; }
[data-reveal-delay="500"] { transition-delay: .5s; }
[data-reveal-delay="600"] { transition-delay: .6s; }
[data-reveal-delay="700"] { transition-delay: .7s; }
/* Split-text per word */
.split-word {
display: inline-block;
overflow: hidden;
padding-bottom: .15em;
margin-bottom: -.15em;
}
.split-word > span {
display: inline-block;
transform: translateY(110%);
transition: transform 1s var(--ease);
}
.split-word.in > span { transform: translateY(0); }
/* ---------- SCROLL TO TOP ---------- */
.scroll-top {
position: fixed;
bottom: 22px; right: 22px;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--grad-gold-2);
color: #fff;
border: 0;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem;
box-shadow: 0 14px 32px color-mix(in srgb, var(--imp-flame) 45%, transparent);
opacity: 0; visibility: hidden; transform: translateY(20px);
transition: all .4s var(--ease-spring);
z-index: 1000;
cursor: pointer;
}
@media (min-width: 768px) { .scroll-top { bottom: 28px; right: 28px; width: 50px; height: 50px; } }
.scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { transform: translateY(-6px) scale(1.06); box-shadow: 0 22px 44px color-mix(in srgb, var(--imp-flame) 55%, transparent); }
/* ---------- CUSTOM CURSOR (desktop only) ---------- */
@media (hover: hover) and (pointer: fine) {
.cursor-dot, .cursor-ring {
position: fixed;
top: 0; left: 0;
pointer-events: none;
z-index: 9999;
border-radius: 50%;
will-change: transform;
opacity: 0;
}
.cursor-dot {
width: 8px; height: 8px;
background: var(--accent);
transition: opacity .25s;
margin: -4px 0 0 -4px;
}
.cursor-ring {
width: 38px; height: 38px;
border: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent);
transition: transform .35s var(--ease-spring), width .3s var(--ease), height .3s var(--ease), opacity .25s, border-color .25s, background .25s;
margin: -19px 0 0 -19px;
}
.cursor-ring.hover {
width: 60px; height: 60px;
margin: -30px 0 0 -30px;
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
}
@media (hover: none), (pointer: coarse) {
.cursor-dot, .cursor-ring { display: none !important; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*,::before,::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.book-shape.floating,
.hero .hero-bg .glow,
.marquee-track,
.hero .hero-bg .particles span,
.author-photo-wrap .deco-circle,
.author-photo-wrap .deco-circle::after,
.author-photo-wrap .deco-badge .badge-dot { animation: none !important; }
body::before { display: none; }
}
/* =================================================================
PREMIUM EFFECTS v2 — refinements en concordancia con la identidad editorial
Filosofía:
- Cada efecto refleja el espíritu de IMPARABLES: avanzar, brillar, resistir
- Sutiles, no estridentes — la elegancia es silencio bien colocado
- Performance: solo se animan transform/opacity (compositor GPU)
================================================================= */
/* 1. GOLD SHEEN SWEEP — brillo dorado que cruza CTAs principales periódicamente
Como la luz reflejada en una medalla cuando giras la cabeza. */
@keyframes goldSheen {
0% { transform: translateX(-150%) skewX(-18deg); }
100% { transform: translateX(250%) skewX(-18deg); }
}
.btn-imp-primary {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-imp-primary::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 245, 220, 0.55) 50%,
rgba(255, 255, 255, 0) 70%,
transparent 100%
);
transform: translateX(-150%) skewX(-18deg);
animation: goldSheen 6s var(--ease) infinite;
animation-delay: 2s;
}
.btn-imp-primary > * { position: relative; z-index: 1; }
.btn-imp-primary:hover::after {
animation-duration: 1.4s;
animation-delay: 0s;
}
/* 2. PULSE GLOW — anillo dorado que late en CTAs muy importantes
Aplicar con class .glow-pulse a un elemento (ej. botón "Comprar"). */
@keyframes pulseRing {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
70% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--accent) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
.glow-pulse { animation: pulseRing 2.6s var(--ease) infinite; }
/* 3. SHIMMER TEXT — gradiente animado con timing musical para palabras clave
Override del .text-grad-anim existente con tonalidad más rica y rítmica */
.text-grad-anim {
background: linear-gradient(
100deg,
var(--imp-champagne) 0%,
var(--imp-gold-3) 18%,
var(--imp-gold-2) 36%,
var(--imp-amber) 54%,
var(--imp-flame) 72%,
var(--imp-amber) 86%,
var(--imp-gold-2) 100%
);
background-size: 220% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent;
animation: shimmerSlide 7s var(--ease) infinite;
}
@keyframes shimmerSlide {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* 4. SPOTLIGHT CURSOR FOLLOW — gradiente radial que sigue al ratón en hero
El JS actualiza --mx y --my en el .hero según movimiento del cursor */
.hero {
--mx: 50%;
--my: 30%;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(
600px circle at var(--mx) var(--my),
color-mix(in srgb, var(--accent) 10%, transparent) 0%,
transparent 65%
);
opacity: 0;
transition: opacity .6s var(--ease);
mix-blend-mode: screen;
}
.hero:hover::after { opacity: 1; }
@media (hover: none) { .hero::after { display: none; } }
/* 5. KEN BURNS — leve zoom + pan continuo en imágenes de foto-autor (vida) */
@keyframes kenBurns {
0% { transform: scale(1.04) translate(0, 0); }
50% { transform: scale(1.10) translate(-1.5%, -1%); }
100% { transform: scale(1.04) translate(0, 0); }
}
.author-photo-wrap .photo-frame img {
animation: kenBurns 22s ease-in-out infinite;
will-change: transform;
}
.author-photo-wrap:hover .photo-frame img {
animation-play-state: paused;
}
/* 6. CHAPTERS — stagger reveal con delay calculado por nth-child para sensación de oleada */
.chapters [data-reveal] { transition-delay: 0s; }
.chapter-card {
transition:
transform .55s var(--ease),
box-shadow .55s var(--ease),
border-color .55s var(--ease);
}
.chapter-card:hover {
transform: translateY(-8px) rotate(-.3deg);
box-shadow: var(--shadow-3);
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.chapter-card .chapter-num {
transition: color .4s var(--ease), letter-spacing .4s var(--ease);
}
.chapter-card:hover .chapter-num {
color: var(--accent-2);
letter-spacing: 0.18em;
}
/* 7. BOOK COVER — ribbon con micro-balanceo sutil al hover (como una bandera) */
@keyframes ribbonSway {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(2deg); }
}
.book-shape:hover .book-ribbon {
animation: ribbonSway 1.8s ease-in-out infinite;
}
/* 8. STAT NUMBERS — entrada con counter overshoot + tracking elegante */
.stat-num, .a-stat .n, .hero-stats .stat-num {
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: 'kern' 1, 'liga' 1, 'tnum' 1, 'lnum' 1;
letter-spacing: -0.018em;
}
/* 9. SOCIAL ICONS — micro-bounce escalonado al revelarse + hover refinado */
.author-socials a {
transition:
transform .35s var(--ease-back),
color .25s var(--ease),
background-color .25s var(--ease),
box-shadow .35s var(--ease);
}
.author-socials a:hover {
transform: translateY(-4px) scale(1.08);
box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* 10. SECTION FADE-IN GRADIENT — degradado sutil arriba/abajo de cada section
Crea sensación de "página de libro" con bordes degradados */
section.synopsis,
section.chapters,
section.author,
section.buy-section,
section.events,
section.contact {
position: relative;
}
section.synopsis::after,
section.chapters::after,
section.author::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: 0;
height: 80px;
pointer-events: none;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 4%, transparent));
z-index: 1;
}
/* 11. BUTTON MICRO-INTERACTION — sutil click-feedback (presión táctil) */
.btn-imp:active { transform: translateY(-1px) scale(.98); }
/* 12. SCROLL CUE — desvanecer al hacer scroll (controla JS pero estilamos transición) */
.scroll-cue { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.scroll-cue.hidden { opacity: 0; transform: translateY(-12px); pointer-events: none; }
/* 13. NAV LINK — underline con draw-in dorado al hover (y para .active) */
.navbar.imp-nav .nav-link {
position: relative;
}
.navbar.imp-nav .nav-link::after {
content: "";
position: absolute;
left: 14px; right: 14px;
bottom: 6px;
height: 1.5px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform .4s var(--ease);
}
.navbar.imp-nav .nav-link:hover::after,
.navbar.imp-nav .nav-link.active::after {
transform: scaleX(1);
}
/* 14. QUOTE CARDS — comilla decorativa con entrada y zoom interno suave */
.quote-card {
transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.quote-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-3);
}
.quote-card .qmark { transition: transform .6s var(--ease-spring); }
.quote-card:hover .qmark { transform: scale(1.08) rotate(-3deg); }
/* 15. BUY CARD — fondo sutil con gradiente dorado al hover (signal de premium) */
.buy-card {
transition:
transform .55s var(--ease),
box-shadow .55s var(--ease),
border-color .55s var(--ease);
position: relative;
overflow: hidden;
}
.buy-card::before {
content: "";
position: absolute;
inset: -2px;
background: var(--grad-gold);
opacity: 0;
z-index: -1;
border-radius: inherit;
transition: opacity .5s var(--ease);
}
.buy-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-3);
border-color: transparent;
}
.buy-card:hover::before { opacity: .18; }
/* 16. THEME TOGGLE — rotación elegante al pulsar */
.theme-toggle { transition: transform .5s var(--ease-spring), background-color .35s var(--ease); }
.theme-toggle:active { transform: rotate(-180deg) scale(.92); }
/* 17. CURSOR custom — más refinado en hover sobre elementos interactivos */
.cursor-ring,
.cursor-dot { mix-blend-mode: difference; }
[data-bs-theme="dark"] .cursor-ring,
[data-bs-theme="dark"] .cursor-dot { mix-blend-mode: normal; }
/* 18. NAVBAR scrolled state — refinar el blur + tinte */
.navbar.imp-nav.scrolled {
background: color-mix(in srgb, var(--bg) 78%, transparent);
backdrop-filter: saturate(1.8) blur(20px);
-webkit-backdrop-filter: saturate(1.8) blur(20px);
}
/* 19. AUTHOR PULL QUOTE — fade-in del comillado lateral + slight tilt */
.author-pull {
transform: rotate(-.4deg);
}
/* 20. STATS BAR — el dato cambia de color al hover por columna (escala micro) */
.author-stats .a-stat {
transition: transform .4s var(--ease), background-color .4s var(--ease);
cursor: default;
}
.author-stats .a-stat:hover {
transform: translateY(-2px);
background: color-mix(in srgb, var(--accent) 5%, transparent);
}
/* ---------- ACCESSIBILITY ---------- */
/* Skip link */
.skip-link {
position: fixed;
top: -100px; left: 14px;
z-index: 10000;
background: var(--ink);
color: var(--bg);
padding: 12px 18px;
border-radius: 999px;
font-family: var(--ff-sans);
font-weight: 600;
font-size: .9rem;
text-decoration: none;
box-shadow: var(--shadow-2);
transition: top .25s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
top: 14px;
outline: 3px solid var(--accent);
outline-offset: 2px;
color: var(--bg);
}
/* Better focus-visible for keyboard nav */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.btn-imp:focus-visible,
.theme-toggle:focus-visible,
.scroll-top:focus-visible,
.author-socials a:focus-visible,
.author-checks li i:focus-visible,
.cv-frame-toolbar button:focus-visible,
.contact-cta:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 4px;
}
.navbar .nav-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.form-control:focus-visible { outline: none; } /* :focus styles already styled */
/* Visually hidden but accessible */
.visually-hidden,
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ---------- PRINT STYLES ---------- */
@media print {
/* Reset base */
body { background: #fff !important; color: #000 !important; font-size: 11pt; line-height: 1.5; }
body::before { display: none !important; }
/* Hide interactive / decorative */
.navbar.imp-nav,
.scroll-cue,
.scroll-top,
.cursor-dot, .cursor-ring,
.skip-link,
.marquee,
.hero .hero-bg,
.quotes .carousel-control-prev,
.quotes .carousel-control-next,
.quotes .carousel-indicators,
.footer-cta,
.author-photo-wrap .deco-circle,
.author-photo-wrap .deco-frame,
.author-photo-wrap .deco-dots,
.author-photo-wrap .deco-badge,
.author::before,
.author::after,
.chapters::before,
.chapters::after,
.synopsis::before,
.cv-section::before { display: none !important; }
/* Show all carousel items at once */
.carousel-item { display: block !important; opacity: 1 !important; }
/* Override gradients and dark backgrounds for print */
*,*::before,*::after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
animation: none !important;
transition: none !important;
}
.text-grad, .text-grad-anim, .author-name em, .hero h1 .accent-word,
.stat-num, .hero-stats .stat-num, .a-stat .n, .quote-card .qmark, .author-pull::before, .author-pull::after,
.buy-card .buy-price, .event-date .day, .footer-cta .phone {
-webkit-text-fill-color: #000 !important;
color: #000 !important;
}
/* Show URLs after anchor links */
a[href^="http"]:after,
a[href^="mailto:"]:after,
a[href^="tel:"]:after {
content: " (" attr(href) ")";
font-size: 80%;
color: #555 !important;
}
a[href^="#"]:after { content: ""; }
/* Make all images print-friendly */
img { max-width: 100% !important; page-break-inside: avoid; }
/* Avoid awkward breaks */
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
.pillar-card, .chapter-card, .event-card, .buy-card,
.author-timeline-item, .quote-card, .accordion-item { page-break-inside: avoid; }
/* Section spacing */
section { padding: 24pt 0 !important; page-break-inside: avoid; }
.container { max-width: 100% !important; }
/* Force light theme for print */
:root { color-scheme: light !important; }
}