/* ================================================================
franciscomeller.cl — SISTEMA VISUAL
v1.0 · 2026-09-13
Sitio estático. Sin frameworks, sin dependencias.
ESTRATEGIA RESPONSIVE
Mobile-first. Los estilos base son para móvil; las @media solo
agregan, nunca corrigen. Tipografía y espaciado fluidos con
clamp(), sin anchos fijos. Breakpoints elegidos donde cada
bloque se rompe, no por tamaños de dispositivo.
DISCIPLINA DE COLOR
El rojo NO se usa en botones. Solo en etiquetas, números,
comillas y hover. Un acento que aparece en todas partes deja
de señalar. El botón principal es hueso sobre negro.
Única excepción: la banda Sales Focus (sección 21) usa rojo de
fondo. Funciona precisamente porque es la única, y su botón
sigue la regla: es negro, no rojo. Una sola banda por página.
ÍNDICE
1. Tokens
2. Reset
3. Tipografía
4. Layout
5. Botones y foco
6. Header y navegación
7. Hero
8. Citas del cliente
9. Tarjetas
10. Tabla "ya probaste"
11. Antes / después
12. Fases
13. Puntos del programa
14. Testimonios
15. Filtro sí / no
16. FAQ
17. Puente a los tres programas
18. Cierre
19. Footer
20. Animación de entrada
21. Banda Sales Focus
================================================================ */
/* ----------------------------------------------------------------
0. TIPOGRAFÍA — SILKA
----------------------------------------------------------------
Silka es de Atipo Foundry y requiere licencia web. Deja los
.woff2 en /assets/fonts/ con exactamente estos nombres y el
sitio los toma solo. Mientras no estén, el navegador cae en
Hanken Grotesk (Google Fonts), la alternativa libre más cercana
en estructura geométrica y altura de x.
Para desactivar el respaldo cuando ya tengas Silka: borra
'Hanken Grotesk' de --font-sans y quita el de Google
en el .
---------------------------------------------------------------- */
/* --- Silka: DESACTIVADA ---------------------------------------
Los cinco .woff2 no están en assets/fonts/ (nunca se compró la
licencia web). Mientras las declaraciones estuvieron activas, el
navegador pedía los cinco archivos en cada visita y recibía cinco
404. El sitio usa Hanken Grotesk, que es el plan previsto.
PARA ACTIVARLA cuando tengas la licencia: deja los cinco .woff2 en
assets/fonts/ con los nombres de LEEME.txt, descomenta este bloque
y agrega 'Silka' al principio de --font-sans.
@font-face {
font-family: 'Silka';
src: url('../fonts/silka-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Silka';
src: url('../fonts/silka-medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Silka';
src: url('../fonts/silka-semibold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Silka';
src: url('../fonts/silka-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Silka';
src: url('../fonts/silka-black.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
-------------------------------------------------------------- */
/* ----------------------------------------------------------------
1. TOKENS
---------------------------------------------------------------- */
:root {
/* --- Color --- */
--bg: #0B0B0C;
--bg-elev: #141416;
--bg-elev-2: #1B1B1E;
--border: #26262A;
--border-strong: #35353B;
--text: #F5F5F4;
--text-dim: #A1A1A6;
--text-faint: #6E6E76;
/* --- Acento ---
Dos tonos del MISMO color (tono 346°), no dos colores.
--accent es el rojo de marca, idéntico al del banner de
LinkedIn. Se usa en elementos grandes y gráficos
—comillas, números de fase, bordes, íconos—,
donde la norma WCAG exige 3:1 y este da 4,4:1.
--accent-text es el mismo tono, un 12% más claro. Se usa en
TEXTO PEQUEÑO —etiquetas, numeraciones, errores,
enlaces—, donde la norma exige 4,5:1. Alcanza
5,0:1 sobre el fondo base y 4,7:1 sobre tarjetas.
Importa de verdad: el cliente de este sitio tiene entre 35 y 58
años, edad en la que la vista de cerca ya empieza a costar. */
--accent: #E32652;
--accent-text: #E64168;
--light: #D9A441; /* la "puerta" del banner de LinkedIn */
/* --- Tipografía ---
Una sola familia en todo el sitio. El peso hace la jerarquía,
no el cambio de fuente: menos archivos, más coherencia. */
--font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont,
'Helvetica Neue', Arial, sans-serif;
/* Alias conservados para no tocar cada regla del archivo */
--font-display: var(--font-sans);
--font-body: var(--font-sans);
/* --- Escala fluida ---
Interpola entre móvil (320px) y escritorio (~1440px).
Sin saltos de tamaño al cruzar un breakpoint. */
--fs-h1: clamp(2.5rem, 1.4rem + 5.2vw, 6rem);
--fs-h2: clamp(1.85rem, 1.2rem + 2.9vw, 3.6rem);
--fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
--fs-soft: clamp(2.25rem, 1.4rem + 3.8vw, 4.25rem); /* cierre */
--fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
--fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
--fs-small: 0.875rem;
--fs-eyebrow: 0.75rem;
/* --- Ritmo vertical --- */
--lh-display: 1.02;
--lh-h2: 1.08;
--lh-body: 1.65;
/* --- Espaciado fluido --- */
--space-section: clamp(4.5rem, 3rem + 7vw, 9rem);
--gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
--measure: 64ch;
/* --- Otros --- */
--radius: 4px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--tap: 44px; /* área táctil mínima */
}
/* ----------------------------------------------------------------
2. RESET
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; /* ninguna sección debe empujar el ancho */
}
img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ----------------------------------------------------------------
3. TIPOGRAFÍA
---------------------------------------------------------------- */
.h1, .h2 {
font-family: var(--font-display);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.03em;
text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-h3);
line-height: 1.2;
letter-spacing: -0.02em;
text-wrap: balance;
}
/* Único título del sitio en minúsculas y peso liviano.
Todo grita en mayúsculas; el cierre susurra. */
.h-soft {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-soft);
line-height: 1.05;
letter-spacing: -0.035em;
text-wrap: balance;
}
.eyebrow {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent-text);
}
.eyebrow--dim { color: var(--text-faint); }
.lead {
font-size: var(--fs-lead);
color: var(--text-dim);
max-width: var(--measure);
text-wrap: pretty;
}
.body { max-width: var(--measure); text-wrap: pretty; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.small { font-size: var(--fs-small); line-height: 1.55; }
.accent { color: var(--accent-text); }
/* ----------------------------------------------------------------
4. LAYOUT
---------------------------------------------------------------- */
.wrap {
width: 100%;
max-width: 1240px;
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--space-section); }
.section--tight { padding-block: calc(var(--space-section) * 0.62); }
.section--line { border-top: 1px solid var(--border); }
.section--elev { background: var(--bg-elev); }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }
/* Grillas: una columna en móvil, se abren por contenido */
.grid { display: grid; gap: clamp(1.25rem, 0.6rem + 2vw, 2rem); }
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); }
@media (min-width: 940px) {
.split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
}
.section-head { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section-head > * + * { margin-top: 1.25rem; }
/* ----------------------------------------------------------------
5. BOTONES Y FOCO
---------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
min-height: var(--tap);
padding: 0.95em 1.9em;
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.01em;
border-radius: var(--radius);
text-align: center;
transition: background-color 0.2s var(--ease),
border-color 0.2s var(--ease),
color 0.2s var(--ease),
transform 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* Hueso sobre negro. Sin rojo: parece una puerta, no un anzuelo. */
.btn--primary { background: var(--text); color: #0B0B0C; }
.btn--primary:hover { background: #fff; }
.btn--ghost { border: 1px solid var(--border-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--text-dim); background: rgba(255,255,255,0.03); }
.btn--sm { min-height: 40px; padding: 0.68em 1.3em; font-size: 0.875rem; }
/* En móvil los CTA ocupan el ancho: destino táctil grande y sin dudas */
.btn-row { display: flex; flex-direction: column; gap: 0.85rem; }
.btn-row .btn { width: 100%; }
@media (min-width: 560px) {
.btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.btn-row .btn { width: auto; }
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.45em;
min-height: var(--tap);
font-weight: 600;
color: var(--text);
transition: color 0.2s var(--ease);
}
.link-arrow > em {
font-style: normal;
border-bottom: 1px solid var(--border-strong);
padding-bottom: 2px;
transition: border-color 0.2s var(--ease);
}
.link-arrow:hover { color: var(--accent-text); }
.link-arrow:hover > em { border-color: var(--accent-text); }
.link-arrow span { transition: transform 0.2s var(--ease); }
.link-arrow:hover span { transform: translateX(3px); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
padding: 0.8em 1.4em;
background: var(--text);
color: #0B0B0C;
font-weight: 700;
}
.skip-link:focus { left: 0; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ----------------------------------------------------------------
6. HEADER Y NAVEGACIÓN
---------------------------------------------------------------- */
.header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(11, 11, 12, 0.82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid transparent;
transition: border-color 0.3s var(--ease);
}
.header.is-scrolled { border-bottom-color: var(--border); }
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 68px;
}
/* Mismo criterio que el logo: contraste de pesos en una sola
palabra visual, sin espacio entre nombre y apellido. */
.logo {
display: inline-flex;
align-items: center;
min-height: var(--tap);
font-family: var(--font-display);
font-weight: 800;
font-size: 1.1875rem;
letter-spacing: -0.035em;
text-transform: uppercase;
white-space: nowrap;
transition: opacity 0.2s var(--ease);
}
.logo:hover { opacity: 0.78; }
.logo em { font-style: normal; font-weight: 400; color: inherit; }
/* Nav de escritorio: oculta bajo 900px */
.nav { display: none; }
@media (min-width: 900px) {
.nav { display: flex; align-items: center; gap: 2.25rem; }
}
.nav__link {
display: inline-flex;
align-items: center;
min-height: var(--tap);
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-dim);
transition: color 0.2s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--text); }
.header__cta { display: none; }
@media (min-width: 640px) { .header__cta { display: inline-flex; } }
/* Hamburguesa: visible bajo 900px */
.burger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: var(--tap);
height: var(--tap);
margin-right: -0.6rem;
}
@media (min-width: 900px) { .burger { display: none; } }
.burger span {
display: block;
width: 22px;
height: 1.5px;
background: var(--text);
transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-nav {
display: none;
border-top: 1px solid var(--border);
background: var(--bg);
padding-block: 0.5rem 2rem;
max-height: calc(100dvh - 68px);
overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
@media (min-width: 900px) { .mobile-nav, .mobile-nav.is-open { display: none; } }
.mobile-nav a {
display: flex;
align-items: center;
min-height: var(--tap);
padding: 0.85rem 0;
font-size: 1.0625rem;
font-weight: 500;
border-bottom: 1px solid var(--border);
}
.mobile-nav .btn { margin-top: 1.5rem; width: 100%; }
/* ----------------------------------------------------------------
7. HERO
---------------------------------------------------------------- */
.hero {
position: relative;
padding-block: clamp(3.5rem, 2rem + 9vw, 8.5rem) clamp(3.5rem, 2rem + 6.5vw, 7rem);
overflow: hidden;
}
.hero__glow {
position: absolute;
top: -14%;
right: -8%;
width: min(760px, 88vw);
aspect-ratio: 1;
background: radial-gradient(circle,
rgba(217, 164, 65, 0.15) 0%,
rgba(217, 164, 65, 0.05) 38%,
transparent 68%);
pointer-events: none;
z-index: 0;
}
.hero__inner { position: relative; z-index: 1; }
/* Dos columnas solo cuando hay espacio real para el retrato.
Bajo 940px la foto va debajo del copy, más contenida. */
@media (min-width: 940px) {
.hero__inner {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(1.25rem, 0.75rem + 1.4vw, 2rem);
align-items: center;
}
}
/* El H1 del hero es más contenido que el del resto del sitio: aquí
convive con el retrato y tiene que pesar lo mismo, no más. */
.hero .h1 {
margin-top: 1.5rem;
max-width: 15ch;
font-size: clamp(2.6rem, 1.85rem + 3.15vw, 4.125rem);
}
.hero .lead { margin-top: 1.5rem; max-width: 46ch; }
.hero .btn-row { margin-top: 2.25rem; }
/* --- Retrato ---
El PNG viene recortado con fondo transparente. La máscara
disuelve el borde inferior (donde termina el recorte) para que
la figura nazca del fondo en vez de estar pegada sobre él. */
.hero__figure {
margin-top: clamp(2.5rem, 1.5rem + 4vw, 3.5rem);
display: flex;
justify-content: center;
}
@media (min-width: 940px) {
.hero__figure { margin-top: 0; justify-content: flex-end; }
}
.hero__figure img {
width: auto;
height: auto;
max-height: clamp(375px, 29rem + 17vw, 748px);
object-fit: contain;
-webkit-mask-image: linear-gradient(to bottom,
#000 0%, #000 62%, rgba(0,0,0,0.55) 82%, transparent 100%);
mask-image: linear-gradient(to bottom,
#000 0%, #000 62%, rgba(0,0,0,0.55) 82%, transparent 100%);
}
.hero__note {
display: flex;
align-items: center;
gap: 0.6em;
margin-top: 1.75rem;
font-size: var(--fs-small);
color: var(--text-faint);
}
.hero__dot {
flex: none;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--light);
box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.16);
}
/* Va inmediatamente bajo el panel de cifras: sin borde superior,
para que no se dupliquen las líneas. */
.creds {
border-bottom: 1px solid var(--border);
padding-block: 1.4rem;
}
.creds__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem clamp(1.25rem, 0.5rem + 2.5vw, 2.75rem);
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-faint);
}
/* ----------------------------------------------------------------
8. CITAS DEL CLIENTE (bloque espejo)
---------------------------------------------------------------- */
/* Panel contenido, no banda a sangre: se alinea con el título y el
párrafo de la misma sección. Las líneas divisorias se consiguen
con un gap de 1px sobre fondo de borde. */
.quotes {
display: grid;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
@media (min-width: 720px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quotes li {
display: flex;
align-items: baseline;
gap: 0.15em;
background: var(--bg-elev);
padding: clamp(1.35rem, 1rem + 1.4vw, 2rem);
font-size: clamp(1rem, 0.95rem + 0.5vw, 1.25rem);
font-weight: 500;
line-height: 1.45;
text-wrap: pretty;
}
.quotes li::before {
content: '\201C';
flex: none;
color: var(--accent);
font-size: 1.35em;
line-height: 1;
}
.quotes li::after {
content: '\201D';
color: var(--accent);
font-size: 1.35em;
line-height: 1;
}
/* ----------------------------------------------------------------
9. TARJETAS
---------------------------------------------------------------- */
.card {
height: 100%;
padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card__num {
display: block;
margin-bottom: 1.1rem;
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--accent-text);
}
.card .h3 { margin-bottom: 0.7rem; }
.card p { color: var(--text-dim); text-wrap: pretty; }
/* ----------------------------------------------------------------
10. TABLA "YA PROBASTE"
---------------------------------------------------------------- */
.ledger { border-top: 1px solid var(--border); }
.ledger__row {
display: grid;
gap: 0.35rem 2rem;
padding-block: clamp(1.1rem, 0.8rem + 1vw, 1.6rem);
border-bottom: 1px solid var(--border);
}
@media (min-width: 720px) {
.ledger__row {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
align-items: baseline;
}
}
.ledger__row dt {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: -0.01em;
}
.ledger__row dd { color: var(--text-dim); text-wrap: pretty; }
/* ----------------------------------------------------------------
11. ANTES / DESPUÉS
---------------------------------------------------------------- */
/* Antes / después.
Es el bloque que debe tener el mayor contraste visual del sitio:
el estado actual se ve apagado y el futuro, iluminado. El ámbar
es el mismo de la puerta del banner de LinkedIn. */
.shift { display: grid; gap: 1.25rem; }
@media (min-width: 860px) {
.shift { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; }
}
.shift__col {
position: relative;
padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
/* Estado actual: apagado, sin relieve */
.shift__col--now { background: transparent; }
.shift__col--now .shift__label { color: var(--text-faint); }
.shift__col--now li { color: var(--text-faint); }
.shift__col--now li::before { background: var(--border-strong); }
/* Estado futuro: elevado y con luz */
.shift__col--after {
background: var(--bg-elev);
border-color: var(--border-strong);
}
.shift__col--after::before {
content: '';
position: absolute;
top: -55%;
right: -25%;
width: 70%;
aspect-ratio: 1;
background: radial-gradient(circle,
rgba(217, 164, 65, 0.16) 0%,
rgba(217, 164, 65, 0.05) 42%,
transparent 70%);
pointer-events: none;
}
.shift__col--after .shift__label { color: var(--accent-text); }
.shift__col--after li { color: var(--text); font-weight: 500; }
.shift__col--after li::before { background: var(--light); }
.shift__label {
position: relative;
display: block;
margin-bottom: 1.5rem;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* Tres pares en paralelo: la comparación se lee línea por línea */
.shift__list { position: relative; display: grid; gap: 0.9rem; }
.shift__list li {
position: relative;
padding-left: 1.5rem;
font-size: 1.0625rem;
line-height: 1.45;
text-wrap: pretty;
}
.shift__list li::before {
content: '';
position: absolute;
left: 0;
top: 0.72em;
width: 9px;
height: 1px;
}
/* Flecha: solo cuando las columnas están lado a lado */
.shift__arrow { display: none; align-self: center; color: var(--border-strong); }
@media (min-width: 860px) { .shift__arrow { display: block; } }
/* ----------------------------------------------------------------
12. FASES
---------------------------------------------------------------- */
.phases { border-top: 1px solid var(--border); }
.phase {
display: grid;
gap: 0.75rem 2.5rem;
padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
border-bottom: 1px solid var(--border);
}
@media (min-width: 860px) {
.phase { grid-template-columns: 5rem minmax(0, 0.75fr) minmax(0, 1.4fr); align-items: start; }
}
.phase__num {
font-family: var(--font-display);
font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
color: var(--border-strong);
transition: color 0.3s var(--ease);
}
.phase:hover .phase__num { color: var(--accent); }
.phase__weeks {
margin-bottom: 0.4rem;
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-faint);
}
.phase__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
letter-spacing: -0.02em;
}
.phase__text { color: var(--text-dim); text-wrap: pretty; }
/* ----------------------------------------------------------------
13. PUNTOS DEL PROGRAMA
---------------------------------------------------------------- */
.points { border-top: 1px solid var(--border); }
.points li {
display: grid;
gap: 0.3rem 2rem;
padding-block: clamp(1.1rem, 0.85rem + 1vw, 1.5rem);
border-bottom: 1px solid var(--border);
}
@media (min-width: 720px) {
.points li { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: baseline; }
}
.points strong {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: -0.01em;
}
.points span { color: var(--text-dim); text-wrap: pretty; }
/* ----------------------------------------------------------------
14. TESTIMONIOS
---------------------------------------------------------------- */
.quote-card {
display: flex;
flex-direction: column;
height: 100%;
padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.quote-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
/* Comilla de apertura como marca gráfica, no como signo de puntuación */
.quote-card::before {
content: '\201C';
display: block;
font-family: var(--font-display);
font-weight: 800;
font-size: 4.5rem;
line-height: 0.62;
color: var(--accent);
margin-bottom: 1.1rem;
}
.quote-card blockquote {
flex: 1;
font-size: 1.0625rem;
line-height: 1.6;
text-wrap: pretty;
}
.quote-card figcaption {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
font-size: var(--fs-small);
}
.quote-card cite { display: block; font-style: normal; font-weight: 600; }
.quote-card figcaption span { color: var(--text-faint); }
.quote-card cite { display: block; font-style: normal; font-weight: 600; }
/* ----------------------------------------------------------------
15. FILTRO SÍ / NO
---------------------------------------------------------------- */
.filter__col { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.filter__head {
padding: 1.15rem clamp(1.25rem, 1rem + 1vw, 1.75rem);
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
letter-spacing: -0.01em;
border-bottom: 1px solid var(--border);
}
.filter__col--yes .filter__head { background: rgba(227, 38, 82, 0.09); }
.filter__col--no .filter__head { background: var(--bg-elev); color: var(--text-dim); }
.filter__list { padding: 0.5rem clamp(1.25rem, 1rem + 1vw, 1.75rem) 1.25rem; }
.filter__list li {
display: flex;
gap: 0.85rem;
padding-block: 0.85rem;
border-bottom: 1px solid var(--border);
text-wrap: pretty;
}
.filter__list li:last-child { border-bottom: none; }
.filter__mark { flex: none; width: 1.1rem; font-weight: 700; line-height: 1.55; }
.filter__col--yes .filter__mark { color: var(--accent-text); }
.filter__col--no .filter__mark { color: var(--text-faint); }
.filter__col--no .filter__list li { color: var(--text-dim); }
/* ----------------------------------------------------------------
16. FAQ
---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
min-height: var(--tap);
padding-block: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1rem, 0.96rem + 0.35vw, 1.1875rem);
letter-spacing: -0.01em;
line-height: 1.3;
list-style: none;
cursor: pointer;
text-wrap: pretty;
transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.faq details[open] summary { color: var(--accent-text); }
.faq__icon { position: relative; flex: none; width: 14px; height: 14px; }
.faq__icon::before, .faq__icon::after {
content: '';
position: absolute;
background: currentColor;
transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.faq__icon::before { top: 50%; left: 0; width: 14px; height: 1.5px; transform: translateY(-50%); }
.faq__icon::after { left: 50%; top: 0; width: 1.5px; height: 14px; transform: translateX(-50%); }
.faq details[open] .faq__icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq__answer {
padding-bottom: 1.6rem;
color: var(--text-dim);
max-width: var(--measure);
text-wrap: pretty;
}
/* ----------------------------------------------------------------
17. PUENTE A LOS TRES PROGRAMAS
---------------------------------------------------------------- */
.prog-card {
display: block;
height: 100%;
padding: clamp(1.5rem, 1rem + 1.4vw, 2rem);
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.prog-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.prog-card__name {
margin-bottom: 0.7rem;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.1875rem;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.prog-card p { color: var(--text-dim); font-size: 0.9375rem; text-wrap: pretty; }
.prog-card__tag {
display: inline-block;
margin-bottom: 0.9rem;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-text);
}
/* ----------------------------------------------------------------
18. CIERRE
---------------------------------------------------------------- */
.close { position: relative; border-top: 1px solid var(--border); overflow: hidden; }
.close__glow {
position: absolute;
bottom: -55%;
left: 50%;
transform: translateX(-50%);
width: min(900px, 115vw);
aspect-ratio: 2 / 1;
background: radial-gradient(ellipse at center,
rgba(217, 164, 65, 0.10) 0%,
transparent 66%);
pointer-events: none;
}
.close__inner { position: relative; z-index: 1; text-align: center; }
.close .h-soft { max-width: 16ch; margin-inline: auto; }
.close__sub {
margin-top: 1.5rem;
font-size: var(--fs-lead);
color: var(--text-dim);
max-width: 46ch;
margin-inline: auto;
text-wrap: balance;
}
.close .btn-row { margin-top: 2.5rem; }
@media (min-width: 560px) { .close .btn-row { justify-content: center; } }
.close__note {
margin-top: 1.5rem;
font-size: var(--fs-small);
color: var(--text-faint);
max-width: 52ch;
margin-inline: auto;
text-wrap: pretty;
}
/* ----------------------------------------------------------------
19. FOOTER
---------------------------------------------------------------- */
.footer {
border-top: 1px solid var(--border);
padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2.5rem;
}
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 560px) { .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 780px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__title {
margin-bottom: 1.1rem;
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-faint);
}
.footer__links li + li { margin-top: 0.35rem; }
.footer__links a {
display: inline-flex;
align-items: center;
min-height: 40px;
font-size: 0.9375rem;
color: var(--text-dim);
transition: color 0.2s var(--ease);
}
.footer__links a:hover { color: var(--text); }
/* Enlace social con ícono. Va en el pie y en la biografía —donde
nace la intención de verificar— y nunca en el encabezado, que
debe conservar una sola acción. */
.social {
display: inline-flex;
align-items: center;
gap: 0.6em;
min-height: var(--tap);
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-dim);
transition: color 0.2s var(--ease);
}
.social:hover { color: var(--text); }
.social svg {
flex: none;
width: 18px;
height: 18px;
fill: currentColor;
}
/* Variante compacta: solo el ícono dentro de un círculo */
.social--icon {
justify-content: center;
width: 42px;
height: 42px;
min-height: 42px;
border: 1px solid var(--border-strong);
border-radius: 50%;
transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
background-color 0.2s var(--ease);
}
.social--icon:hover { border-color: var(--text-dim); background: rgba(255,255,255,0.04); }
.footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.75rem 1.5rem;
margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
padding-top: 1.75rem;
border-top: 1px solid var(--border);
font-size: 0.8125rem;
color: var(--text-faint);
}
/* ----------------------------------------------------------------
19b. PÁGINA CONVERSEMOS
---------------------------------------------------------------- */
/* --- Encabezado de página interior --- */
.page-head {
position: relative;
padding-block: clamp(3rem, 2rem + 6vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4rem);
overflow: hidden;
text-align: center;
}
.page-head__glow {
position: absolute;
top: -40%;
left: 50%;
transform: translateX(-50%);
width: min(820px, 110vw);
aspect-ratio: 1.6 / 1;
background: radial-gradient(ellipse at center,
rgba(217, 164, 65, 0.12) 0%, transparent 66%);
pointer-events: none;
}
.page-head__inner { position: relative; z-index: 1; }
.page-head .h-soft { max-width: 16ch; margin-inline: auto; margin-top: 1.25rem; }
.page-head .lead { max-width: 48ch; margin-inline: auto; margin-top: 1.5rem; text-wrap: balance; }
/* --- Qué es / qué no es --- */
.expect { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .expect { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.expect__col {
padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.expect__col--is { background: var(--bg-elev); }
.expect__title {
display: block;
margin-bottom: 1.25rem;
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.expect__col--is .expect__title { color: var(--accent-text); }
.expect__col--not .expect__title { color: var(--text-faint); }
.expect__col li {
display: flex;
gap: 0.8rem;
padding-block: 0.7rem;
text-wrap: pretty;
}
.expect__col--not li { color: var(--text-dim); }
.expect__mark { flex: none; width: 1rem; font-weight: 700; line-height: 1.55; }
.expect__col--is .expect__mark { color: var(--accent-text); }
.expect__col--not .expect__mark { color: var(--text-faint); }
/* --- Formulario --- */
.form-shell {
max-width: 720px;
margin-inline: auto;
padding: clamp(1.5rem, 1rem + 2.4vw, 3rem);
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.field { margin-bottom: 1.5rem; }
.field:last-of-type { margin-bottom: 0; }
.field label {
display: block;
margin-bottom: 0.55rem;
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: -0.005em;
}
.field .hint {
display: block;
margin-top: -0.2rem;
margin-bottom: 0.65rem;
font-size: 0.8125rem;
color: var(--text-faint);
font-weight: 400;
text-wrap: pretty;
}
.field .req { color: var(--accent-text); }
.field input,
.field select,
.field textarea {
width: 100%;
min-height: var(--tap);
padding: 0.8rem 1rem;
font-family: var(--font-body);
font-size: 1rem; /* 16px: evita el zoom automático en iOS */
line-height: 1.5;
color: var(--text);
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
-webkit-appearance: none;
appearance: none;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--text-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: var(--accent);
background: var(--bg-elev-2);
outline: none;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Flecha del select dibujada en CSS: sin imagen que cargar */
.field select {
padding-right: 2.75rem;
background-image:
linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
background-position:
calc(100% - 1.2rem) calc(50% + 2px),
calc(100% - 0.85rem) calc(50% + 2px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
.field select option { background: var(--bg-elev); color: var(--text); }
/* Mensaje de error por campo */
.field .error {
display: none;
margin-top: 0.45rem;
font-size: 0.8125rem;
color: var(--accent-text);
font-weight: 500;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--accent); }
.field.has-error .error { display: block; }
/* --- Consentimiento expreso (Ley 21.719) ---
Casilla obligatoria antes de enviar. Se destaca del resto de los
campos porque es una declaración, no un dato más del formulario. */
.field--consent {
margin-top: 2rem;
margin-bottom: 0;
padding: 1.125rem 1.25rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-elev);
}
.consent {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.85rem;
align-items: start;
cursor: pointer;
margin: 0;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
}
/* Anula el estilo de input de texto que hereda de .field input */
.field--consent input[type="checkbox"] {
width: 1.15rem;
height: 1.15rem;
min-height: 0;
margin: 0.2rem 0 0;
padding: 0;
border-radius: 2px;
accent-color: var(--accent);
-webkit-appearance: auto;
appearance: auto;
cursor: pointer;
}
.consent span {
font-size: 0.875rem;
line-height: 1.65;
color: var(--text-dim);
text-wrap: pretty;
}
.consent a {
color: var(--text);
text-decoration: underline;
text-underline-offset: 2px;
}
.field--consent.has-error { border-color: var(--accent); }
.field--consent .error { margin-top: 0.75rem; }
.field--consent.has-error .error { display: block; }
/* --- Marca de dato pendiente en documentos legales ---
Visible a propósito: si queda uno sin completar, se ve. */
.todo {
background: rgba(227, 38, 82, 0.16);
color: var(--accent-text);
padding: 0.05em 0.4em;
border-radius: 2px;
font-weight: 600;
font-size: 0.92em;
}
/* Trampa antispam: invisible y fuera del recorrido de teclado */
.gotcha {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Dos columnas cuando hay espacio */
.field-row { display: grid; gap: 0 1.25rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.form-actions { margin-top: 2rem; }
.form-actions .btn { width: 100%; }
.form-note {
margin-top: 1.25rem;
font-size: 0.8125rem;
color: var(--text-faint);
text-wrap: pretty;
}
/* Aviso global del formulario (error de envío) */
.form-alert {
display: none;
margin-bottom: 1.75rem;
padding: 1rem 1.25rem;
border: 1px solid var(--accent);
border-left-width: 2px;
border-radius: var(--radius);
background: rgba(227, 38, 82, 0.07);
font-size: 0.9375rem;
text-wrap: pretty;
}
.form-alert.is-visible { display: block; }
/* --- Canal alternativo (WhatsApp) ---
Deliberadamente discreto: es la salida secundaria, no compite
con el formulario. */
.alt-channel {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.35rem 0.7rem;
max-width: 720px;
margin: 1.75rem auto 0;
font-size: var(--fs-small);
color: var(--text-faint);
text-align: center;
}
.alt-channel a {
display: inline-flex;
align-items: center;
gap: 0.4em;
min-height: 40px;
font-weight: 600;
color: var(--text-dim);
border-bottom: 1px solid var(--border-strong);
padding-bottom: 1px;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.alt-channel a:hover { color: var(--text); border-color: var(--text-dim); }
.alt-channel__hours { flex-basis: 100%; }
@media (min-width: 620px) { .alt-channel__hours { flex-basis: auto; } }
/* --- Pasos "qué pasa después" --- */
.steps { counter-reset: step; border-top: 1px solid var(--border); }
.steps li {
display: grid;
gap: 0.3rem 1.75rem;
padding-block: clamp(1.1rem, 0.85rem + 1vw, 1.5rem);
border-bottom: 1px solid var(--border);
counter-increment: step;
}
@media (min-width: 720px) {
.steps li { grid-template-columns: 3rem minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: baseline; }
}
.steps li::before {
content: counter(step, decimal-leading-zero);
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--accent-text);
}
.steps strong {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: -0.01em;
}
.steps span { color: var(--text-dim); text-wrap: pretty; }
/* --- Página de gracias --- */
.thanks { text-align: center; padding-block: clamp(4rem, 3rem + 8vw, 9rem); }
.thanks__mark {
width: 56px;
height: 56px;
margin: 0 auto 2rem;
border: 1px solid var(--accent);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--accent);
}
.thanks .h-soft { max-width: 18ch; margin-inline: auto; }
.thanks .lead { max-width: 46ch; margin-inline: auto; margin-top: 1.5rem; text-wrap: balance; }
/* ----------------------------------------------------------------
19c. PÁGINA FOCUS METHOD
---------------------------------------------------------------- */
/* --- Desglose semanal dentro de cada fase --- */
.weeks { margin-top: 1.5rem; }
.weeks li {
display: grid;
gap: 0.15rem 1.25rem;
padding-block: 0.7rem;
border-top: 1px solid var(--border);
}
.weeks li:first-child { border-top: none; padding-top: 0; }
@media (min-width: 560px) {
.weeks li { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; }
}
.weeks b {
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
}
.weeks span { color: var(--text-dim); font-size: 0.9375rem; text-wrap: pretty; }
/* La fase de esta página es más alta: el número va arriba, no al lado */
.phase--deep { align-items: start; }
@media (min-width: 860px) {
.phase--deep { grid-template-columns: 5rem minmax(0, 0.7fr) minmax(0, 1.5fr); }
}
/* --- Bloque de programa (Executive / Career / Life) --- */
.program {
scroll-margin-top: 90px; /* el header pegajoso no tape el ancla */
padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem);
border-top: 1px solid var(--border);
}
.program:first-of-type { border-top: none; }
.program__head { display: grid; gap: 0.75rem 2rem; margin-bottom: 2rem; }
@media (min-width: 800px) {
.program__head { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
}
.program__name {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
text-transform: uppercase;
letter-spacing: -0.03em;
line-height: 1.05;
}
.program__for { color: var(--text-dim); text-wrap: pretty; }
.program__grid { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .program__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Un programa puede llevar imagen: pasa a tres columnas y la foto
ocupa la primera. La usan los tres programas. */
@media (min-width: 900px) {
.program__grid--img { grid-template-columns: 0.72fr 1fr 1fr; align-items: stretch; }
}
.program__img {
margin: 0;
border-radius: var(--radius);
overflow: hidden;
min-height: 220px;
}
.program__img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 28%;
/* Foto en color atenuada: baja la saturación para que las tres
fotos de programa lean como una serie y no compitan con la
paleta del sitio, conservando algo de calidez. */
filter: brightness(0.8) contrast(1.08) saturate(0.48);
}
.program__box {
padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.program__box--quote { border-left: 2px solid var(--accent); }
.program__label {
display: block;
margin-bottom: 0.85rem;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-faint);
}
.program__box p { color: var(--text-dim); text-wrap: pretty; }
.program__box--quote p {
color: var(--text);
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.5;
}
/* --- Franja del esquema común --- */
.scheme {
padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
background: var(--bg-elev);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
}
.scheme__grid { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
@media (min-width: 620px) { .scheme__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 940px) { .scheme__grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.scheme__item strong {
display: block;
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
color: var(--text);
}
.scheme__item span {
display: block;
margin-top: 0.5rem;
font-size: 0.9375rem;
color: var(--text-dim);
text-wrap: pretty;
}
/* ----------------------------------------------------------------
19d. PÁGINA TU COACH
---------------------------------------------------------------- */
/* --- Encabezado con retrato --- */
.bio-head {
position: relative;
padding-block: clamp(3rem, 2rem + 6vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4rem);
overflow: hidden;
}
.bio-head__glow {
position: absolute;
top: -18%;
right: -10%;
width: min(700px, 90vw);
aspect-ratio: 1;
background: radial-gradient(circle,
rgba(217, 164, 65, 0.13) 0%, rgba(217, 164, 65, 0.04) 40%, transparent 68%);
pointer-events: none;
}
.bio-head__inner { position: relative; z-index: 1; }
@media (min-width: 940px) {
.bio-head__inner {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
gap: clamp(2rem, 1rem + 4vw, 4.5rem);
align-items: center;
}
}
/* ----------------------------------------------------------------
TRES VARIANTES DEL RETRATO
Para cambiar, edita UNA palabra en la etiqueta de
/tu-coach/index.html:
class="bio-head bio-head--fusion" ← activa (recomendada)
class="bio-head bio-head--marco"
class="bio-head bio-head--fondo"
---------------------------------------------------------------- */
.bio-head__figure { margin: 2.5rem 0 0; display: flex; justify-content: center; }
@media (min-width: 940px) { .bio-head__figure { margin-top: 0; justify-content: flex-end; } }
.bio-head__figure img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center 20%;
}
/* --- A · MARCO: retrato enmarcado, contenido y discreto --- */
.bio-head--marco .bio-head__figure img {
max-width: 340px;
max-height: clamp(300px, 20rem + 8vw, 440px);
border-radius: var(--radius);
border: 1px solid var(--border);
filter: brightness(0.93) saturate(0.96);
}
/* --- B · FUSIÓN: sin borde; los bordes se disuelven en el fondo --- */
.bio-head--fusion .bio-head__figure {
/* Se sale un poco del contenedor para no verse encajonada */
margin-right: calc(var(--gutter) * -0.6);
}
@media (max-width: 939px) { .bio-head--fusion .bio-head__figure { margin-right: 0; } }
.bio-head--fusion .bio-head__figure img {
max-width: 440px;
max-height: clamp(340px, 24rem + 10vw, 540px);
filter: brightness(0.9) saturate(0.92) contrast(1.04);
-webkit-mask-image: radial-gradient(118% 108% at 74% 30%,
#000 38%, rgba(0,0,0,0.72) 62%, rgba(0,0,0,0.25) 82%, transparent 96%);
mask-image: radial-gradient(118% 108% at 74% 30%,
#000 38%, rgba(0,0,0,0.72) 62%, rgba(0,0,0,0.25) 82%, transparent 96%);
}
/* --- C · FONDO: la foto cubre el encabezado, con capa oscura --- */
.bio-head--fondo { isolation: isolate; }
.bio-head--fondo::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-image:
/* Capa que protege la legibilidad del titular, más densa a la izquierda.
A la derecha se abre para que la figura se distinga. */
linear-gradient(to right,
rgba(11,11,12,0.98) 0%,
rgba(11,11,12,0.94) 34%,
rgba(11,11,12,0.70) 54%,
rgba(11,11,12,0.34) 78%,
rgba(11,11,12,0.55) 100%),
/* Funde arriba con el encabezado y abajo con la sección siguiente */
linear-gradient(to bottom,
rgba(11,11,12,0.60) 0%,
transparent 26%,
rgba(11,11,12,0.96) 100%),
url('../img/francisco-sesion.jpg');
/* CLAVE: la foto se escala por ALTURA, no por ancho.
Es una imagen vertical en un contenedor horizontal: con 'cover'
hay que ampliarla tanto para cubrir el ancho que solo queda el
rostro. Ajustando por altura, la figura conserva escala humana
y ocupa el tercio derecho.
ENCUADRE — ajusta solo estos números:
112% tamaño de la figura (más alto = más grande)
76% posición horizontal (menor = más a la izquierda)
18% posición vertical (menor = se ve más pelo) */
background-size: cover, cover, auto 112%;
background-position: center, center, 76% 18%;
background-repeat: no-repeat, no-repeat, no-repeat;
}
/* En esta variante la foto vive en el fondo, no en una columna */
.bio-head--fondo .bio-head__figure { display: none; }
.bio-head--fondo .bio-head__inner { grid-template-columns: minmax(0, 1fr); }
.bio-head--fondo .bio-head__glow { display: none; }
@media (min-width: 940px) { .bio-head--fondo .bio-head__inner { min-height: 60vh; align-content: center; } }
.bio-role {
margin-top: 1.25rem;
font-family: var(--font-display);
font-size: clamp(1rem, 0.94rem + 0.4vw, 1.25rem);
font-weight: 600;
color: var(--text-dim);
letter-spacing: -0.01em;
}
/* --- Cifras ---
Panel contenido, alineado con el resto de la página. Igual que
el bloque de citas: nada de bandas a sangre sueltas. */
.figures {
display: grid;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
@media (min-width: 560px) { .figures { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px) { .figures { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.figures li {
background: var(--bg-elev);
padding: clamp(1.25rem, 1rem + 1.1vw, 1.85rem);
}
.figures strong {
display: block;
font-family: var(--font-display);
font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
}
.figures span {
display: block;
margin-top: 0.6rem;
font-size: 0.875rem;
line-height: 1.5;
color: var(--text-dim);
text-wrap: pretty;
}
/* --- Línea de tiempo de formación --- */
.track { border-top: 1px solid var(--border); }
.track li {
display: grid;
gap: 0.4rem 2rem;
padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
border-bottom: 1px solid var(--border);
}
@media (min-width: 720px) {
.track li { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: baseline; }
}
.track__year {
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--accent-text);
}
.track__what {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: -0.01em;
}
.track__where { display: block; margin-top: 0.25rem; color: var(--text-dim); font-size: 0.9375rem; text-wrap: pretty; }
/* --- Relato con retrato de apoyo ---
La foto es un elemento secundario, no un co-protagonista: la
página ya tiene un retrato grande en el encabezado. Columna
angosta, tope duro de ancho y mucho aire contra el texto. */
.story { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 900px) {
.story {
grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr);
column-gap: clamp(3rem, 2rem + 4vw, 5.5rem);
align-items: start;
}
}
.story__figure {
margin: 0;
max-width: 300px; /* tope duro: no crece aunque haya espacio */
}
@media (max-width: 899px) {
.story__figure { max-width: 240px; } /* en móvil, aún más contenida */
}
.story__figure img {
width: 100%;
border-radius: var(--radius);
border: 1px solid var(--border);
/* Baja un punto el brillo: una foto clara sobre fondo oscuro
compite con el texto si entra a plena intensidad. */
filter: brightness(0.92) saturate(0.95);
}
.story__figure figcaption {
margin-top: 0.9rem;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--text-faint);
text-wrap: pretty;
}
/* --- Nota firmada junto al formulario --- */
.signed {
display: grid;
gap: 1.25rem;
align-items: center;
max-width: 720px;
margin: 0 auto clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
background: var(--bg-elev);
border: 1px solid var(--border);
border-left: 2px solid var(--light);
border-radius: var(--radius);
}
@media (min-width: 560px) {
.signed { grid-template-columns: 96px minmax(0, 1fr); gap: 1.5rem; }
}
.signed__img {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
object-position: center 18%;
border: 1px solid var(--border-strong);
filter: brightness(0.96);
}
.signed p { color: var(--text); text-wrap: pretty; }
.signed cite {
display: block;
margin-top: 0.7rem;
font-style: normal;
font-size: 0.8125rem;
color: var(--text-faint);
}
/* --- Imagen de apoyo bajo un título de sección ---
Ocupa la columna izquierda del .split, que de otro modo queda
vacía bajo el titular. */
.aside-figure { margin: 2.25rem 0 0; }
@media (min-width: 940px) { .aside-figure { margin-top: 2.5rem; } }
.aside-figure img {
width: 100%;
max-width: 420px;
height: auto;
border-radius: var(--radius);
border: 1px solid var(--border);
filter: brightness(0.9) contrast(1.05);
}
.aside-figure figcaption {
margin-top: 0.9rem;
max-width: 420px;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--text-faint);
text-wrap: pretty;
}
/* --- Límites ---
Cada tarjeta abre con lo que NO hace y cierra con lo que SÍ.
Así la sección deja de ser una lista de negaciones y se
convierte en una declaración de método. */
.limits { display: grid; gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem); }
@media (min-width: 780px) { .limits { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.limit {
display: flex;
flex-direction: column;
height: 100%;
padding: clamp(1.35rem, 1rem + 1.4vw, 1.9rem);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg);
transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.limit:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.limit__mark {
display: grid;
place-items: center;
width: 26px;
height: 26px;
margin-bottom: 1.1rem;
border: 1px solid var(--border-strong);
border-radius: 50%;
font-size: 0.75rem;
line-height: 1;
color: var(--text-faint);
transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.limit:hover .limit__mark { color: var(--text-dim); border-color: var(--text-faint); }
.limit__no {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
letter-spacing: -0.015em;
line-height: 1.25;
}
.limit__why {
margin-top: 0.7rem;
color: var(--text-dim);
font-size: 0.9375rem;
text-wrap: pretty;
}
/* Lo que sí: cierra la tarjeta en afirmativo */
.limit__yes {
margin-top: auto;
padding-top: 1.1rem;
padding-left: 1.1rem;
border-top: 1px solid var(--border);
border-left: 2px solid var(--light);
margin-left: -0.15rem;
position: relative;
}
.limit__yes b {
display: block;
margin-bottom: 0.35rem;
font-family: var(--font-display);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--light);
}
.limit__yes span { font-size: 0.9375rem; font-weight: 500; color: var(--text); text-wrap: pretty; }
/* El borde ámbar arranca bajo la línea divisoria, no antes */
.limit__yes { border-top-left-radius: 0; }
/* --- Cita destacada --- */
.pull {
margin-block: clamp(2.5rem, 2rem + 2vw, 4rem);
padding-left: clamp(1.25rem, 1rem + 1vw, 2rem);
border-left: 2px solid var(--accent);
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.9rem);
line-height: 1.25;
letter-spacing: -0.025em;
max-width: 30ch;
text-wrap: balance;
}
/* ----------------------------------------------------------------
19e. PÁGINAS DE TEXTO LARGO (legales)
---------------------------------------------------------------- */
.prose {
max-width: 68ch;
margin-inline: auto;
}
.prose > * + * { margin-top: 1.15rem; }
.prose h2 {
margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.4rem);
letter-spacing: -0.02em;
line-height: 1.25;
scroll-margin-top: 90px;
}
.prose h2 .num {
display: inline-block;
min-width: 1.9em;
color: var(--accent);
font-weight: 700;
}
.prose h3 {
margin-top: 1.9rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: -0.01em;
}
.prose p { color: var(--text-dim); text-wrap: pretty; }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul { margin-top: 0.9rem; }
.prose ul li {
position: relative;
padding-left: 1.4rem;
padding-block: 0.4rem;
color: var(--text-dim);
text-wrap: pretty;
}
.prose ul li::before {
content: '';
position: absolute;
left: 0.25rem;
top: 1.2em;
width: 5px;
height: 1px;
background: var(--accent);
}
.prose a {
color: var(--text);
border-bottom: 1px solid var(--border-strong);
transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.prose a:hover { color: var(--accent-text); border-color: var(--accent-text); }
/* Tabla de datos dentro de texto legal */
.prose .data {
margin-top: 1.25rem;
border-top: 1px solid var(--border);
}
.prose .data > div {
display: grid;
gap: 0.15rem 1.5rem;
padding-block: 0.85rem;
border-bottom: 1px solid var(--border);
}
@media (min-width: 620px) {
.prose .data > div { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr); align-items: baseline; }
}
.prose .data dt { font-weight: 600; color: var(--text); font-size: 0.9375rem; }
.prose .data dd { margin: 0; color: var(--text-dim); font-size: 0.9375rem; text-wrap: pretty; }
/* Aviso de borrador / nota al pie destacada */
.notice {
margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
padding: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
border: 1px solid var(--border-strong);
border-left: 2px solid var(--light);
border-radius: var(--radius);
font-size: 0.9375rem;
color: var(--text-dim);
text-wrap: pretty;
}
.notice strong { color: var(--text); }
/* ----------------------------------------------------------------
19f. INSIGHTS — LISTADO Y ARTÍCULO
---------------------------------------------------------------- */
/* --- Listado --- */
.posts { display: grid; gap: 1px; }
@media (min-width: 760px) { .posts { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .posts { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.post-card {
/* El padding es una variable porque la imagen necesita saltarselo
para llegar a sangre hasta el borde de la tarjeta. */
--pc-pad: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
display: flex;
flex-direction: column;
height: 100%;
padding: var(--pc-pad);
background: var(--bg);
transition: background-color 0.25s var(--ease);
/* Las lineas divisorias las dibuja cada tarjeta, no el fondo de la
grilla. Antes el gris venia del contenedor y quedaba a la vista
en las celdas vacias: con 1, 2, 4, 5, 7 articulos siempre sobra
hueco en la ultima fila. Con box-shadow no ocupa espacio y las
tarjetas vecinas comparten la linea del gap de 1px. */
box-shadow: 0 0 0 1px var(--border);
}
.post-card:hover { background: var(--bg-elev); }
/* --- Imagen de la tarjeta (opcional) ---
Si el articulo tiene imagen, va arriba y a sangre. Si no la tiene,
la tarjeta funciona igual: el bloque simplemente no existe. */
.post-card__media {
display: block;
margin: calc(var(--pc-pad) * -1) calc(var(--pc-pad) * -1) 1.5rem;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--bg-elev);
/* La tarjeta es un contenedor flex en columna. Sin esto, el bloque
de la imagen es un item flexible y se comprime cuando el texto
necesita espacio: la proporcion 16:9 se rompe y la foto queda
recortada de forma despareja entre una tarjeta y otra. */
flex: none;
width: auto;
}
.post-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
opacity: 0.85;
}
.post-card:hover .post-card__media img { transform: scale(1.03); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.post-card__media img { transition: none; }
.post-card:hover .post-card__media img { transform: none; }
}
.post-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.9rem;
margin-bottom: 1.1rem;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-faint);
}
.post-card__tag { color: var(--accent-text); }
.post-card__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.4rem);
line-height: 1.22;
letter-spacing: -0.02em;
text-wrap: balance;
transition: color 0.2s var(--ease);
}
.post-card:hover .post-card__title { color: var(--accent-text); }
.post-card__excerpt {
flex: 1;
margin-top: 0.85rem;
color: var(--text-dim);
font-size: 0.9375rem;
text-wrap: pretty;
}
.post-card__go {
margin-top: 1.5rem;
font-size: var(--fs-small);
font-weight: 600;
color: var(--text-dim);
display: inline-flex;
gap: 0.4em;
transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.post-card:hover .post-card__go { color: var(--accent-text); }
/* --- Estado vacío ---
Un blog sin artículos resta credibilidad. Mientras no haya
contenido, este bloque dice la verdad en vez de disimularla. */
.empty {
max-width: 620px;
margin-inline: auto;
padding: clamp(2.5rem, 2rem + 3vw, 4rem) clamp(1.5rem, 1rem + 2vw, 3rem);
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
text-align: center;
}
.empty__mark {
width: 48px; height: 48px;
margin: 0 auto 1.75rem;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
border-radius: 50%;
color: var(--text-faint);
}
.empty p { color: var(--text-dim); text-wrap: pretty; }
.empty .btn-row { margin-top: 2rem; }
@media (min-width: 560px) { .empty .btn-row { justify-content: center; } }
/* --- Artículo --- */
.article-head {
padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
border-bottom: 1px solid var(--border);
}
.article-head__inner { max-width: 68ch; margin-inline: auto; }
.article-head h1 {
margin-top: 1.25rem;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.85rem, 1.3rem + 2.4vw, 3rem);
line-height: 1.08;
letter-spacing: -0.03em;
text-wrap: balance;
}
.article-head .lead { margin-top: 1.5rem; max-width: none; }
.article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.25rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
font-size: var(--fs-small);
color: var(--text-faint);
}
.article-meta__author { display: flex; align-items: center; gap: 0.75rem; color: var(--text-dim); }
.article-meta__author img {
width: 36px; height: 36px;
border-radius: 50%;
object-fit: cover;
object-position: center 18%;
}
/* Cierre del artículo: puente al CTA sin romper la lectura */
.article-cta {
max-width: 68ch;
margin: clamp(3rem, 2rem + 3vw, 4.5rem) auto 0;
padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
background: var(--bg-elev);
border: 1px solid var(--border);
border-left: 2px solid var(--accent);
border-radius: var(--radius);
}
.article-cta p { color: var(--text-dim); text-wrap: pretty; }
.article-cta .btn-row { margin-top: 1.5rem; }
/* ----------------------------------------------------------------
LECTURA CLARA — cuerpo del articulo sobre fondo claro
----------------------------------------------------------------
La cabecera del articulo (eyebrow, titular, bajada, firma) sigue
oscura: es la marca. Desde ahi hacia abajo, la zona de lectura
pasa a fondo claro.
Tres razones:
1. Un texto de 1.200 palabras se lee menos cansado sobre claro.
2. Las fotos del blog son oscuras y cinematograficas: sobre
claro se leen como una pieza, sobre negro se funden.
3. El corte cae justo en el borde del hero, asi que la
transicion se ve intencional y no como un error.
El pie de pagina y el bloque de "ver todos" vuelven a oscuro, de
modo que el articulo queda como una hoja insertada en el sitio.
---------------------------------------------------------------- */
.lectura-clara {
/* Blanco calido, no #FFF puro: el blanco absoluto sobre pantalla
brillante deslumbra tanto como el negro absoluto cansa. */
--lc-bg: #FAF9F7;
--lc-texto: #1A1A1B;
--lc-cuerpo: #3A3A3F;
--lc-borde: #E2E0DC;
--lc-borde-f: #C9C6C0;
--lc-tenue: #6B6862;
/* El rojo de marca (#E32652) da 4,28 de contraste sobre este fondo
y no llega al minimo AA de 4,5. Esta version algo mas oscura da
5,52 y se lee igual de roja. Solo se usa aqui. */
--lc-acento: #C41E45;
background: var(--lc-bg);
color: var(--lc-texto);
}
/* --- Texto --- */
.lectura-clara .prose p,
.lectura-clara .prose ul li { color: var(--lc-cuerpo); }
.lectura-clara .prose h2,
.lectura-clara .prose h3,
.lectura-clara .prose strong { color: var(--lc-texto); }
/* --- Enlaces --- */
.lectura-clara .prose a {
color: var(--lc-texto);
border-bottom-color: var(--lc-borde-f);
}
.lectura-clara .prose a:hover {
color: var(--lc-acento);
border-color: var(--lc-acento);
}
/* --- Cita destacada y vinetas: la barra roja se oscurece para no
vibrar sobre el fondo claro --- */
.lectura-clara .pull { color: var(--lc-texto); border-left-color: var(--lc-acento); }
.lectura-clara .prose ul li::before { background: var(--lc-acento); }
/* --- Figura: sobre claro la foto oscura ya resalta sola; el borde
apenas la asienta en la pagina --- */
.lectura-clara .article-fig img { border: 1px solid var(--lc-borde); }
.lectura-clara .article-fig figcaption { color: var(--lc-tenue); }
/* --- Cierre discreto --- */
.lectura-clara .article-close { border-top-color: var(--lc-borde); }
.lectura-clara .article-close p { color: var(--lc-cuerpo); }
.lectura-clara .link-arrow { color: var(--lc-texto); }
.lectura-clara .link-arrow > em { border-bottom-color: var(--lc-borde-f); }
.lectura-clara .link-arrow:hover { color: var(--lc-acento); }
/* --- Seleccion de texto legible sobre claro --- */
.lectura-clara ::selection { background: var(--lc-acento); color: #fff; }
/* --- Figura dentro de un articulo -------------------------------
Se alinea con la columna de texto (68ch, unos 600 px). La imagen
se entrega en 1600 px de ancho para que se vea nitida tambien en
pantallas con escalado alto. */
.article-fig {
max-width: 68ch;
margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto;
}
.article-fig img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
}
.article-fig figcaption {
margin-top: 0.85rem;
font-size: 0.8125rem;
color: var(--text-faint);
text-wrap: pretty;
}
/* --- Fuentes del articulo ---------------------------------------
Transparencia sin estorbar: tipografia chica, gris, al final del
cuerpo y antes del cierre. Quien no las necesita, ni las ve.
Aunque el articulo use una sola cifra ajena, se cita. */
.article-fuentes {
max-width: 68ch;
margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
font-size: 0.8125rem;
line-height: 1.6;
color: var(--text-faint);
}
.article-fuentes h2 {
margin: 0 0 0.85rem;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-faint);
}
.article-fuentes ul { margin: 0; }
.article-fuentes li { padding-block: 0.3rem; text-wrap: pretty; }
.article-fuentes a {
color: inherit;
border-bottom: 1px solid transparent;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.article-fuentes a:hover { color: var(--text); border-bottom-color: currentColor; }
/* En la zona de lectura clara, el gris se ajusta al fondo */
.lectura-clara .article-fuentes,
.lectura-clara .article-fuentes h2 { color: var(--lc-tenue); }
.lectura-clara .article-fuentes { border-top-color: var(--lc-borde); }
.lectura-clara .article-fuentes a:hover { color: var(--lc-acento); }
/* --- Cierre discreto de articulo --------------------------------
Alternativa sobria a .article-cta. Sin recuadro, sin boton de
color y con un solo enlace: quien leyo 1.300 palabras ya esta
interesado, no hay que empujarlo. */
.article-close {
max-width: 68ch;
margin: clamp(3rem, 2rem + 3vw, 4rem) auto 0;
padding-top: clamp(2rem, 1.5rem + 2vw, 2.75rem);
border-top: 1px solid var(--border);
}
.article-close p { color: var(--text-dim); text-wrap: pretty; }
.article-close p + p { margin-top: 1rem; }
.article-close .link-arrow { margin-top: 1.5rem; display: inline-block; }
/* ----------------------------------------------------------------
19g. RECORRIDO DE 12 SEMANAS — diagrama
----------------------------------------------------------------
Versión visual y escaneable de las tres fases. El detalle semana
a semana vive en /focus-method/; aquí se muestra la forma del
proceso, no su contenido.
---------------------------------------------------------------- */
.journey { position: relative; }
/* Regla de tiempo: en escritorio es horizontal; en móvil, vertical */
.journey__rule {
position: relative;
display: none;
margin-bottom: 2.25rem;
}
@media (min-width: 880px) { .journey__rule { display: block; } }
.journey__line {
height: 1px;
background: linear-gradient(to right,
var(--border) 0%,
var(--accent) 50%,
var(--light) 100%);
}
.journey__ticks {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 0.7rem;
}
.journey__ticks span {
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-faint);
}
.journey__ticks span:last-child { text-align: right; }
/* Marcas sobre la línea */
.journey__dot {
position: absolute;
top: -3px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--border-strong);
}
.journey__dot--1 { left: 0; }
.journey__dot--2 { left: calc(33.333% - 3.5px); }
.journey__dot--3 { left: calc(66.666% - 3.5px); }
.journey__dot--4 { right: 0; border-color: var(--light); background: var(--light); }
.journey__grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 880px) { .journey__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.journey__step {
display: flex;
flex-direction: column;
background: var(--bg-elev);
padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
transition: background-color 0.25s var(--ease);
}
.journey__step:hover { background: var(--bg-elev-2); }
.journey__num {
font-family: var(--font-display);
font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.045em;
color: var(--border-strong);
transition: color 0.3s var(--ease);
}
.journey__step:hover .journey__num { color: var(--accent); }
.journey__weeks {
margin-top: 1.1rem;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-text);
}
.journey__name {
margin-top: 0.5rem;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.45rem);
letter-spacing: -0.02em;
}
.journey__text { margin-top: 0.8rem; color: var(--text-dim); font-size: 0.9375rem; text-wrap: pretty; }
/* Lo que te llevas al cerrar cada fase */
.journey__out {
margin-top: auto;
padding-top: 1.35rem;
border-top: 1px solid var(--border);
}
.journey__out b {
display: block;
font-family: var(--font-display);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 0.45rem;
}
.journey__out span { font-weight: 600; font-size: 0.9375rem; text-wrap: pretty; }
/* ----------------------------------------------------------------
19h. CRITERIOS EN EL CIERRE
---------------------------------------------------------------- */
.criteria {
display: grid;
gap: 0.6rem;
max-width: 480px;
margin: 2.25rem auto 0;
text-align: left;
}
.criteria li {
display: flex;
gap: 0.8rem;
align-items: baseline;
font-size: 0.9375rem;
color: var(--text-dim);
text-wrap: pretty;
}
.criteria li b { flex: none; color: var(--accent-text); font-weight: 700; }
.criteria__intro {
margin-top: 2.25rem;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
}
/* ----------------------------------------------------------------
19i. SECCIÓN "TU COACH" DEL INICIO — retrato de fondo
----------------------------------------------------------------
La foto vive detrás del contenido, anclada a la izquierda, y se
disuelve en todas direcciones con una máscara radial. No es una
imagen sobre el fondo: nace de él.
---------------------------------------------------------------- */
.home-coach { position: relative; overflow: hidden; }
.home-coach::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: min(56%, 700px);
z-index: 0;
pointer-events: none;
background-image:
/* Velo del mismo gris de la sección: deja ver la figura sin
que compite con el titular que va encima */
linear-gradient(to right,
rgba(20,20,22,0.66) 0%,
rgba(20,20,22,0.60) 40%,
rgba(20,20,22,0.88) 74%,
rgba(20,20,22,1) 100%),
url('../img/francisco-escucha.jpg');
/* Escalada por ALTURA: es una foto vertical en un contenedor ancho */
background-size: cover, auto 118%;
background-position: center, left 22% top 16%;
background-repeat: no-repeat, no-repeat;
/* Se disuelve en todas direcciones desde el costado izquierdo */
-webkit-mask-image: radial-gradient(112% 104% at 20% 46%,
#000 26%, rgba(0,0,0,0.78) 52%, rgba(0,0,0,0.3) 76%, transparent 94%);
mask-image: radial-gradient(112% 104% at 20% 46%,
#000 26%, rgba(0,0,0,0.78) 52%, rgba(0,0,0,0.3) 76%, transparent 94%);
}
/* El contenido siempre por encima del retrato */
.home-coach > .wrap { position: relative; z-index: 1; }
/* Columna izquierda reservada para que el retrato quede libre.
Solo existe cuando el .split está en dos columnas. */
.home-coach__space { display: none; }
@media (min-width: 940px) { .home-coach__space { display: block; } }
/* Bajo 900px el texto ocupa todo el ancho y la foto estorbaría */
@media (max-width: 899px) {
.home-coach::before { display: none; }
}
/* ----------------------------------------------------------------
19b. COMUNIDAD FOCUS — FONDO CON PUERTA ILUMINADA
---------------------------------------------------------------- */
/* La foto entra por el costado izquierdo y se funde hacia la derecha
en el mismo gris de la sección (--bg-elev), de modo que la columna
de texto queda siempre sobre fondo sólido. */
.comunidad-fondo { position: relative; isolation: isolate; overflow: hidden; }
.comunidad-fondo::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
/* 1 · Funde arriba y abajo con las secciones vecinas, y protege
la zona alta donde va el titular */
linear-gradient(to bottom,
rgba(20,20,22,0.88) 0%,
rgba(20,20,22,0.30) 32%,
rgba(20,20,22,0.24) 62%,
rgba(20,20,22,0.86) 100%),
/* 2 · FUSIÓN HACIA LA DERECHA: la foto se disuelve antes de
llegar a la columna de los tres puntos */
linear-gradient(to right,
rgba(20,20,22,0.06) 0%,
rgba(20,20,22,0.14) 26%,
rgba(20,20,22,0.52) 46%,
rgba(20,20,22,0.88) 60%,
rgba(20,20,22,1) 72%),
url('../img/comunidad-fondo.jpg');
/* ENCUADRE — 'cover' y nada más.
La versión anterior ampliaba la foto al 120% para correr la
puerta hacia la izquierda. En una pantalla normal daba igual,
pero en un monitor 4K con escalado al 250% ese 120% obligaba a
estirar los 2560 px del archivo hasta 4608 px reales: 1,8x de
ampliación, y se veía blanda.
Con 'cover' la foto nunca se estira más de lo imprescindible, y
la puerta cae igual dentro de la columna del titular, alrededor
del 36% del ancho. */
background-size: cover;
background-position: center, center, center 48%;
background-repeat: no-repeat;
}
/* El contenido siempre por encima del fondo */
.comunidad-fondo > .wrap { position: relative; z-index: 1; }
/* Bajo 940px las dos columnas se apilan y el texto ocupa todo el
ancho: la foto pasa a ser una veladura muy tenue, centrada en la
puerta, para que no compita con la lectura. */
@media (max-width: 939px) {
.comunidad-fondo::before {
background-image:
linear-gradient(to bottom,
rgba(20,20,22,0.92) 0%,
rgba(20,20,22,0.74) 40%,
rgba(20,20,22,0.90) 100%),
linear-gradient(to right,
rgba(20,20,22,0.62) 0%,
rgba(20,20,22,0.70) 100%),
url('../img/comunidad-fondo.jpg');
background-size: cover, cover, cover;
background-position: center, center, 36% 45%;
}
}
/* ----------------------------------------------------------------
20. ANIMACIÓN DE ENTRADA
---------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; }
}
/* ----------------------------------------------------------------
21. BANDA SALES FOCUS
El unico bloque del sitio con fondo rojo. Todo lo demas es negro
y hueso, por eso esta banda funciona: no compite con nada.
Se usa una sola vez por pagina, como corte antes del cierre.
Los tres colores de la marca, cada uno con un trabajo distinto:
rojo de fondo (la interrupcion), blanco en el texto (el contraste)
y negro en el panel y el boton (el ancla, y el guino al resto
del sitio).
Contraste verificado sobre el tramo mas claro del degradado
(#C41E45): blanco puro da 5.8:1, sobre AA para texto normal.
Por eso el degradado no llega al #E32652 del acento, que en
blanco queda justo en 4.5:1 y no aguanta texto de cuerpo.
---------------------------------------------------------------- */
.sfocus {
--sf-rojo-hondo: #8E1030;
--sf-rojo: #C41E45;
--sf-negro: #0B0B0C;
position: relative;
overflow: hidden;
padding-block: var(--space-section);
color: #fff;
background: linear-gradient(150deg,
var(--sf-rojo-hondo) 0%,
var(--sf-rojo) 58%,
var(--sf-rojo-hondo) 100%);
}
/* Veladura de luz arriba a la derecha: le quita el aspecto de
bloque plano de color sin aclarar el fondo donde cae el texto. */
.sfocus::before {
content: "";
position: absolute;
top: -40%;
right: -10%;
width: min(760px, 90vw);
aspect-ratio: 1;
background: radial-gradient(circle at center,
rgba(227, 38, 82, 0.55) 0%,
transparent 68%);
pointer-events: none;
}
.sfocus > .wrap { position: relative; z-index: 1; }
/* Eyebrow: aqui el acento rojo no sirve, va en blanco translucido */
.sfocus .eyebrow { color: rgba(255, 255, 255, 0.72); }
.sfocus__grid { display: grid; gap: clamp(2.25rem, 1rem + 4vw, 4rem); }
@media (min-width: 940px) {
.sfocus__grid {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
align-items: start;
}
}
.sfocus__name {
margin-top: 1.1rem;
font-family: var(--font-display);
font-weight: 800;
font-size: 0.9375rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.sfocus__title {
margin-top: 0.9rem;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
line-height: var(--lh-h2);
letter-spacing: -0.03em;
text-transform: uppercase;
text-wrap: balance;
}
.sfocus__lead {
margin-top: 1.5rem;
font-size: var(--fs-lead);
line-height: 1.6;
color: rgba(255, 255, 255, 0.86);
max-width: 52ch;
text-wrap: pretty;
}
.sfocus__lead b { color: #fff; font-weight: 700; }
/* Datos del formato: 12 semanas, cupos, etc. Filas finas
separadas por lineas, no tarjetas: el peso visual ya lo pone
el color de fondo. */
.sfocus__facts {
margin-top: 2rem;
display: grid;
gap: 0;
border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.sfocus__facts li {
display: grid;
grid-template-columns: 7.5rem minmax(0, 1fr);
gap: 1rem;
padding-block: 0.9rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.28);
font-size: var(--fs-small);
line-height: 1.5;
}
.sfocus__facts b {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding-top: 0.15rem;
color: rgba(255, 255, 255, 0.72);
}
.sfocus__facts span { color: rgba(255, 255, 255, 0.92); text-wrap: pretty; }
@media (max-width: 479px) {
.sfocus__facts li { grid-template-columns: 1fr; gap: 0.3rem; }
}
/* Panel negro: lo que se queda instalado. El negro del sitio
entrando dentro del rojo. */
.sfocus__panel {
padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
background: var(--sf-negro);
border-radius: var(--radius);
box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
}
.sfocus__panel-label {
display: block;
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-text);
}
.sfocus__panel-title {
margin-top: 1rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--text);
}
.sfocus__deliverables { margin-top: 1.6rem; display: grid; gap: 1.15rem; }
.sfocus__deliverables li {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr);
gap: 0.4rem;
}
.sfocus__deliverables b {
font-family: var(--font-display);
font-size: var(--fs-small);
font-weight: 700;
color: var(--accent-text);
}
.sfocus__deliverables p {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--text-dim);
text-wrap: pretty;
}
.sfocus__deliverables strong { color: var(--text); font-weight: 700; }
.sfocus__panel-note {
margin-top: 1.7rem;
padding-top: 1.3rem;
border-top: 1px solid var(--border);
font-size: var(--fs-small);
line-height: 1.55;
color: var(--text-faint);
text-wrap: pretty;
}
/* Boton negro sobre rojo. El btn--primary del sitio es hueso sobre
negro; aqui se invierte para que el negro siga siendo el color
de la accion en todo el sitio. */
.btn--ink {
background: var(--sf-negro, #0B0B0C);
color: #fff;
}
.btn--ink:hover { background: #000; }
/* Boton secundario dentro de la banda: contorno blanco */
.btn--on-red {
border: 1px solid rgba(255, 255, 255, 0.55);
color: #fff;
}
.btn--on-red:hover {
border-color: #fff;
background: rgba(255, 255, 255, 0.1);
}
.sfocus .btn-row { margin-top: 2.25rem; }
.sfocus__note {
margin-top: 1.4rem;
font-size: var(--fs-small);
line-height: 1.55;
color: rgba(255, 255, 255, 0.78);
max-width: 54ch;
text-wrap: pretty;
}
/* Foco visible sobre fondo rojo: el anillo del sitio es rojo y
aqui desapareceria. */
.sfocus a:focus-visible,
.sfocus button:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}