/* ==========================================================================
Receptum v3 — Modern Finance UI
Diseño: minimalismo serio + acento lima vibrante.
Tipografía: Inter Tight (única familia) + JetBrains Mono (datos).
Paleta: blancos neutros, casi-negro, acento lima (oklch).
Mobile-first. Vanilla CSS. Sin dependencias.
========================================================================== */
:root {
/* ------------------------------------------------------------------------
SURFACES — fondos neutros + tintes sutiles para variedad entre secciones
------------------------------------------------------------------------ */
--bg: oklch(0.99 0.002 250);
--surface-1: oklch(0.98 0.004 250);
--surface-2: oklch(0.96 0.006 250);
--surface-3: oklch(0.93 0.008 250);
/* Tintes sutiles para diferenciar secciones (chroma muy baja, casi neutros) */
--tint-cool: oklch(0.975 0.014 235); /* azul muy sutil */
--tint-warm: oklch(0.975 0.013 75); /* cálido muy sutil */
--tint-mint: oklch(0.975 0.017 165); /* menta muy sutil */
--tint-violet: oklch(0.975 0.016 295); /* violeta muy sutil */
--tint-lime: oklch(0.97 0.04 115); /* lima muy sutil */
/* INK — tinta */
--ink: oklch(0.16 0.012 250);
--ink-soft: oklch(0.36 0.015 250);
--ink-muted: oklch(0.55 0.012 250);
--ink-faint: oklch(0.72 0.008 250);
--ink-inverse: oklch(0.99 0.002 250);
/* RULE — bordes */
--rule: oklch(0.91 0.006 250);
--rule-strong: oklch(0.82 0.010 250);
/* BRAND — casi-negro, autoridad financiera */
--brand: oklch(0.18 0.012 250);
--brand-strong: oklch(0.10 0.014 250);
--brand-soft: oklch(0.94 0.008 250);
/* ACCENT — lima vibrante, energía moderna */
--accent: oklch(0.88 0.21 125);
--accent-strong: oklch(0.78 0.23 130);
--accent-soft: oklch(0.97 0.06 125);
--accent-ink: oklch(0.18 0.012 250);
/* ACCENT secundario — coral cálido para contraste y badges no-críticos */
--accent-2: oklch(0.72 0.18 30);
--accent-2-soft: oklch(0.96 0.04 30);
/* ACCENT terciario — cobalto para enlaces destacados y stats */
--accent-3: oklch(0.55 0.18 250);
--accent-3-soft: oklch(0.96 0.04 250);
/* SEMANTIC */
--success: oklch(0.62 0.15 155);
--success-soft: oklch(0.95 0.04 155);
--warning: oklch(0.75 0.16 75);
--warning-soft: oklch(0.97 0.05 75);
--danger: oklch(0.56 0.22 25);
--danger-soft: oklch(0.96 0.05 25);
/* GRADIENTES reutilizables */
--gradient-hero: linear-gradient(135deg, var(--brand) 0%, oklch(0.08 0.020 270) 100%);
--gradient-hero-accent: radial-gradient(ellipse at top right, oklch(0.88 0.21 125 / 0.15) 0%, transparent 50%), linear-gradient(135deg, var(--brand) 0%, oklch(0.08 0.020 270) 100%);
--gradient-soft-cool: linear-gradient(135deg, var(--bg) 0%, var(--tint-cool) 100%);
--gradient-soft-warm: linear-gradient(135deg, var(--bg) 0%, var(--tint-warm) 100%);
--gradient-soft-mint: linear-gradient(135deg, var(--bg) 0%, var(--tint-mint) 100%);
--gradient-soft-violet: linear-gradient(135deg, var(--bg) 0%, var(--tint-violet) 100%);
--gradient-accent-soft: linear-gradient(135deg, var(--accent-soft) 0%, var(--tint-warm) 100%);
--gradient-recommended: linear-gradient(180deg, var(--bg) 0%, var(--tint-lime) 100%);
/* Aliases legacy mantenidos (paper/-deep/-soft/-strong, etc.)
Mapeados al nuevo sistema para no romper clases existentes. */
--paper: var(--bg);
--paper-deep: var(--surface-2);
--paper-soft: var(--surface-1);
--terracota: var(--accent-strong);
--terracota-deep: var(--brand);
--terracota-soft: var(--accent-soft);
--salvia: var(--brand);
--salvia-deep: var(--brand-strong);
--salvia-soft: var(--brand-soft);
--ocre: var(--accent);
--ocre-deep: var(--accent-strong);
--ocre-soft: var(--accent-soft);
--accent-deep: var(--accent-strong);
/* ------------------------------------------------------------------------
TYPOGRAPHY — Inter Tight (única familia) + JetBrains Mono
------------------------------------------------------------------------ */
--font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--size-base: 16.5px;
--lh-base: 1.62;
/* Contenedores */
--container: 76rem;
--container-wide: 90rem;
--w-reading: 46rem;
--container-narrow: 46rem;
--container-text: 36rem;
/* Spacing 4pt scale */
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;
--space-3xl: 6rem;
/* Shadows — sutiles + tintadas para profundidad de color */
--shadow-xs: 0 1px 2px oklch(0.16 0.012 250 / 0.05);
--shadow-sm: 0 1px 3px oklch(0.16 0.012 250 / 0.07), 0 1px 2px oklch(0.16 0.012 250 / 0.04);
--shadow-md: 0 6px 18px -4px oklch(0.16 0.012 250 / 0.09), 0 2px 6px oklch(0.16 0.012 250 / 0.05);
--shadow-lg: 0 18px 40px -12px oklch(0.16 0.014 250 / 0.18), 0 6px 12px oklch(0.16 0.014 250 / 0.06);
--shadow-xl: 0 30px 80px -20px oklch(0.16 0.014 250 / 0.24), 0 10px 20px oklch(0.16 0.014 250 / 0.08);
--shadow-md-cool: 0 6px 18px -4px oklch(0.30 0.13 245 / 0.10), 0 2px 4px oklch(0.16 0.012 250 / 0.04);
--shadow-md-mint: 0 6px 18px -4px oklch(0.50 0.15 165 / 0.10), 0 2px 4px oklch(0.16 0.012 250 / 0.04);
--shadow-md-warm: 0 6px 18px -4px oklch(0.60 0.13 60 / 0.10), 0 2px 4px oklch(0.16 0.012 250 / 0.04);
--shadow-accent: 0 8px 24px -4px oklch(0.88 0.21 125 / 0.35), 0 2px 4px oklch(0.16 0.012 250 / 0.06);
--shadow-brand: 0 12px 32px -8px oklch(0.16 0.014 250 / 0.30), 0 4px 8px oklch(0.16 0.014 250 / 0.10);
--shadow-focus: 0 0 0 3px oklch(0.88 0.21 125 / 0.45);
/* Radii — generosos, modernos */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--duration-fast: 120ms;
--duration: 200ms;
--duration-slow: 320ms;
/* Brand color rotation para fichas/cards/items (10 colores) */
--brand-c0: oklch(0.45 0.18 145); /* verde profundo */
--brand-c1: oklch(0.50 0.18 260); /* índigo */
--brand-c2: oklch(0.55 0.20 25); /* coral */
--brand-c3: oklch(0.48 0.16 195); /* teal */
--brand-c4: oklch(0.52 0.18 305); /* magenta */
--brand-c5: oklch(0.50 0.18 70); /* ámbar profundo */
--brand-c6: oklch(0.46 0.16 235); /* azul nocturno */
--brand-c7: oklch(0.52 0.18 110); /* lima profundo */
--brand-c8: oklch(0.48 0.18 340); /* rosa profundo */
--brand-c9: oklch(0.42 0.13 175); /* turquesa */
}
/* ==========================================================================
RESET + BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
background: var(--bg);
color: var(--ink);
scroll-behavior: smooth;
scroll-padding-top: 5rem;
}
@media (min-width: 52em) {
html { font-size: var(--size-base); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 1rem;
line-height: var(--lh-base);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern", "liga", "calt", "ss01";
min-height: 100vh;
}
img, svg, video, picture {
max-width: 100%;
height: auto;
display: block;
}
/* Focus visible global */
:focus-visible {
outline: 2px solid var(--accent-strong);
outline-offset: 2px;
border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
/* Skip link */
.skip-link {
position: absolute;
left: 1rem;
top: -100px;
background: var(--brand);
color: var(--ink-inverse);
padding: 0.6rem 1rem;
border-radius: var(--radius-md);
text-decoration: none;
z-index: 9999;
transition: top var(--duration) var(--ease-out);
}
.skip-link:focus { top: 1rem; }
/* ==========================================================================
TYPOGRAPHY
========================================================================== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 600;
color: var(--ink);
margin: 0 0 0.5em;
line-height: 1.2;
letter-spacing: -0.022em;
font-feature-settings: "kern", "liga", "calt", "ss01";
}
h1 {
font-size: clamp(2rem, 3.6vw + 1rem, 3.6rem);
font-weight: 700;
letter-spacing: -0.028em;
line-height: 1.05;
}
h2 {
font-size: clamp(1.5rem, 1.6vw + 1rem, 2.1rem);
font-weight: 650;
margin-top: 2em;
letter-spacing: -0.024em;
}
h3 {
font-size: clamp(1.18rem, 0.4vw + 1.05rem, 1.4rem);
font-weight: 600;
margin-top: 1.6em;
letter-spacing: -0.018em;
}
h4 {
font-size: 1rem;
font-weight: 600;
margin-top: 1.4em;
letter-spacing: 0;
text-transform: none;
color: var(--ink);
}
p { margin: 0 0 1em; }
strong, b { font-weight: 600; color: var(--ink); }
em, i { font-style: italic; }
small { font-size: 0.85em; color: var(--ink-soft); }
ul, ol { padding-left: 1.3em; margin: 0 0 1.2em; }
/* Espaciado de listas SOLO dentro de contenedores de prosa. Cualquier lista de
UI (nav, chips, grids) queda intacta sin tener que neutralizar manualmente. */
.post__cuerpo ul li + li,
.post__cuerpo ol li + li,
.pilar__contenido ul li + li,
.pilar__contenido ol li + li,
.ranking__cuerpo ul li + li,
.ranking__cuerpo ol li + li,
.herramienta__narrativa ul li + li,
.herramienta__narrativa ol li + li,
.legal__cuerpo ul li + li,
.legal__cuerpo ol li + li { margin-top: 0.35em; }
a {
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--rule-strong);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
}
a:hover, a:focus-visible {
color: var(--brand);
text-decoration-color: var(--brand);
}
blockquote {
margin: 1.5em 0;
padding: 0.2em 0 0.2em 1.2em;
border-left: 3px solid var(--accent);
color: var(--ink-soft);
font-style: normal;
}
code, kbd, samp {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--surface-2);
padding: 0.1em 0.35em;
border-radius: 4px;
color: var(--ink);
}
pre {
font-family: var(--font-mono);
background: var(--surface-2);
padding: 1rem 1.2rem;
border-radius: var(--radius-md);
overflow-x: auto;
font-size: 0.9rem;
margin: 1.5em 0;
border: 1px solid var(--rule);
}
pre code { background: none; padding: 0; }
hr {
border: 0;
border-top: 1px solid var(--rule);
margin: 2.5em 0;
}
/* ==========================================================================
LAYOUT — container
========================================================================== */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 1.2rem;
}
@media (min-width: 48em) {
.container { padding: 0 2rem; }
}
@media (min-width: 80em) {
.container { padding: 0; }
}
.main {
min-height: 60vh;
}
/* ==========================================================================
SITE HEADER
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: oklch(0.99 0.002 250 / 0.85);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--rule);
transition: transform var(--duration) var(--ease-out);
}
.site-header.is-hidden {
transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
.site-header.is-hidden { transform: none; }
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 64px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.site-header__brand {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
}
.site-header__logo {
height: 30px;
width: auto;
display: block;
}
.site-header__toggle {
display: none;
background: transparent;
border: 0;
width: 44px;
height: 44px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
cursor: pointer;
border-radius: var(--radius-md);
transition: background var(--duration-fast);
}
.site-header__toggle:hover { background: var(--surface-2); }
.site-header__toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--ink);
border-radius: 2px;
transition: transform var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
}
.site-header__toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.site-header__toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.site-header__nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 0.2rem;
align-items: center;
}
.site-header__nav li {
margin: 0;
display: flex;
align-items: center;
}
.site-header__nav a {
display: inline-flex;
align-items: center;
line-height: 1;
padding: 0.65rem 0.95rem;
font-size: 0.94rem;
font-weight: 500;
color: var(--ink-soft);
text-decoration: none;
border-radius: var(--radius-md);
transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.site-header__nav a:hover {
background: var(--surface-2);
color: var(--ink);
}
.site-header__nav a[aria-current="page"] {
color: var(--ink);
background: var(--surface-2);
font-weight: 600;
}
@media (max-width: 51.99em) {
.site-header__toggle { display: flex; }
.site-header__nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg);
border-bottom: 1px solid var(--rule);
box-shadow: var(--shadow-md);
max-height: 0;
overflow: hidden;
transition: max-height var(--duration) var(--ease-out);
}
.site-header__nav.is-open {
max-height: 80vh;
}
.site-header__nav ul {
flex-direction: column;
gap: 0;
padding: 0.5rem 1rem 1rem;
align-items: stretch;
}
.site-header__nav a {
padding: 0.85rem 1rem;
font-size: 1rem;
}
}
/* ==========================================================================
SITE FOOTER
========================================================================== */
.site-footer {
margin-top: 6rem;
background: var(--brand);
color: var(--ink-faint);
padding: 3.5rem 0 2rem;
}
.site-footer__inner {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
max-width: var(--container);
margin: 0 auto;
padding: 0 1.2rem;
}
@media (min-width: 48em) {
.site-footer__inner {
grid-template-columns: 1.4fr repeat(3, 1fr);
gap: 2rem;
padding: 0 2rem;
}
}
.site-footer__brand-tagline {
margin-top: 0.7rem;
font-size: 0.9rem;
color: var(--ink-faint);
line-height: 1.5;
max-width: 26ch;
}
.site-footer__logo {
height: 32px;
width: auto;
filter: brightness(0) invert(1);
opacity: 0.95;
}
.site-footer__nav h3 {
color: var(--ink-inverse);
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 1rem;
}
.site-footer__nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.site-footer__nav li { margin-top: 0.55rem; }
.site-footer__nav a {
color: var(--ink-faint);
text-decoration: none;
font-size: 0.92rem;
transition: color var(--duration-fast) var(--ease-out);
}
.site-footer__nav a:hover { color: var(--ink-inverse); }
.site-footer__legal {
grid-column: 1 / -1;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid oklch(0.99 0.002 250 / 0.12);
display: flex;
flex-direction: column;
gap: 0.4rem;
font-size: 0.82rem;
color: var(--ink-faint);
}
@media (min-width: 48em) {
.site-footer__legal {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
/* ==========================================================================
BREADCRUMB
========================================================================== */
.breadcrumb {
font-size: 0.86rem;
margin: 1.5rem 0;
}
.breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
padding: 0;
margin: 0;
}
.breadcrumb li {
display: flex;
align-items: center;
gap: 0.45rem;
color: var(--ink-muted);
margin: 0;
}
.breadcrumb li + li::before {
content: "/";
color: var(--ink-faint);
}
.breadcrumb a {
color: var(--ink-muted);
text-decoration: none;
transition: color var(--duration-fast);
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }
/* ==========================================================================
BUTTONS / CTAs base
========================================================================== */
.btn,
button.btn,
a.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.2rem;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
line-height: 1;
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
min-height: 44px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
background: var(--brand);
color: var(--ink-inverse);
}
.btn--primary:hover {
background: var(--brand-strong);
color: var(--ink-inverse);
text-decoration: none;
}
.btn--accent {
background: var(--accent);
color: var(--accent-ink);
}
.btn--accent:hover {
background: var(--accent-strong);
color: var(--accent-ink);
text-decoration: none;
}
.btn--ghost {
background: transparent;
color: var(--ink);
border-color: var(--rule-strong);
}
.btn--ghost:hover {
background: var(--surface-2);
border-color: var(--ink);
color: var(--ink);
text-decoration: none;
}
/* ==========================================================================
POST LAYOUT
========================================================================== */
.post {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.2rem 4rem;
}
@media (min-width: 48em) {
.post { padding: 0 2rem 5rem; }
}
.post__header {
max-width: var(--w-reading);
margin: 0.5rem 0 2rem;
}
.post__kicker {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.7rem;
}
.post__titulo {
margin: 0 0 0.7rem;
}
.post__subtitulo {
font-size: 1.18rem;
color: var(--ink-soft);
line-height: 1.4;
margin: 0 0 1.2rem;
font-weight: 400;
max-width: 60ch;
}
.post__meta {
font-size: 0.85rem;
color: var(--ink-muted);
font-feature-settings: "tnum";
margin: 0;
}
.post__meta time { font-variant-numeric: tabular-nums; }
.post__hero {
margin: 0 0 2rem;
}
.post__hero img {
width: 100%;
border-radius: var(--radius-lg);
aspect-ratio: 16 / 9;
object-fit: cover;
}
.post--con-hero-seccion .post__hero { display: none; }
.post__cuerpo {
max-width: var(--w-reading);
font-size: 1.05rem;
line-height: 1.7;
}
.post__cuerpo > p,
.post__cuerpo > ul,
.post__cuerpo > ol,
.post__cuerpo > blockquote,
.post__cuerpo > h2,
.post__cuerpo > h3,
.post__cuerpo > h4,
.post__cuerpo > pre,
.post__cuerpo > table { max-width: 100%; }
.post__cuerpo img {
border-radius: var(--radius-md);
margin: 1.5em 0;
}
.post__cuerpo h2 a,
.post__cuerpo h3 a,
.post__cuerpo h4 a {
text-decoration: none;
color: inherit;
}
.post__relacionados {
max-width: var(--container);
margin: 4rem auto 0;
padding: 2.5rem 0 0;
border-top: 1px solid var(--rule);
}
.post__relacionados-titulo {
font-size: 1.2rem;
margin: 0 0 1.5rem;
}
.post__relacionados-lista {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 48em) {
.post__relacionados-lista { grid-template-columns: repeat(2, 1fr); }
}
.post__relacionados-lista li { margin: 0; }
.post__relacionados-lista a {
display: block;
padding: 1.1rem 1.3rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
text-decoration: none;
color: var(--ink);
transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast);
}
.post__relacionados-lista a:hover {
border-color: var(--ink);
transform: translateY(-2px);
background: var(--surface-1);
}
.post__relacionados-h {
display: block;
font-weight: 600;
margin-bottom: 0.3rem;
font-size: 1rem;
}
.post__relacionados-d {
display: block;
color: var(--ink-soft);
font-size: 0.88rem;
line-height: 1.5;
}
/* ==========================================================================
BYLINE
========================================================================== */
.byline {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 1rem 0 2rem;
padding: 0.8rem 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.byline--post { max-width: var(--w-reading); }
.byline__inner {
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
width: 100%;
}
.byline__foto {
width: 44px;
height: 44px;
border-radius: var(--radius-full);
object-fit: cover;
}
.byline--post .byline__foto { width: 38px; height: 38px; }
.byline__texto {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.byline__nombre {
font-weight: 600;
color: var(--ink);
text-decoration: none;
font-size: 0.95rem;
}
.byline__nombre:hover { color: var(--brand); }
.byline__cargo {
font-size: 0.82rem;
color: var(--ink-muted);
}
.byline__meta {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-left: auto;
font-size: 0.78rem;
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
PILAR LAYOUT
========================================================================== */
.pilar {
margin: 0;
}
.pilar__hero {
position: relative;
width: 100%;
min-height: 360px;
margin-bottom: 3rem;
overflow: hidden;
background: var(--brand);
}
.pilar__hero--nomedia {
min-height: 220px;
}
.pilar__hero-media {
position: absolute;
inset: 0;
}
.pilar__hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.55) saturate(0.85);
}
.pilar__hero-overlay {
position: relative;
z-index: 2;
min-height: inherit;
display: flex;
flex-direction: column;
justify-content: flex-end;
background:
radial-gradient(ellipse at 75% 20%, oklch(0.88 0.21 125 / 0.12) 0%, transparent 55%),
linear-gradient(180deg,
oklch(0.16 0.014 250 / 0.65) 0%,
oklch(0.16 0.014 250 / 0.78) 60%,
oklch(0.10 0.018 250 / 0.92) 100%);
padding: 6rem 0 2.8rem;
}
/* AdSense Auto Ads venía colocando anuncios dentro del hero (zona de marca,
no slot publicitario). El cambio a flex-direction: column ya evita que
compriman el contenido en horizontal; además bloqueamos la inserción aquí
por si Auto Ads decide reintentar. Los slots reales se gestionan en
adsense.njk. */
.pilar__hero ins.adsbygoogle,
.pilar__hero [data-google-query-id],
.pilar__hero [id^="google_ads_iframe_"],
.pilar__hero ins[data-anchor-status],
.pilar__hero ins[data-ad-status] {
display: none !important;
}
.pilar__hero--nomedia .pilar__hero-overlay {
background: transparent;
padding: 3rem 0 1rem;
color: var(--ink);
}
.pilar__hero-overlay-inner {
width: 100%;
color: var(--ink-inverse);
}
.pilar__hero--nomedia .pilar__hero-overlay-inner {
color: var(--ink);
}
/* Hero con imagen: forzar texto blanco a TODO descendiente (h1, h2, p, a) */
.pilar__hero:not(.pilar__hero--nomedia) .pilar__hero-overlay-inner h1,
.pilar__hero:not(.pilar__hero--nomedia) .pilar__hero-overlay-inner h2,
.pilar__hero:not(.pilar__hero--nomedia) .pilar__hero-overlay-inner h3,
.pilar__hero:not(.pilar__hero--nomedia) .pilar__hero-overlay-inner p,
.pilar__hero:not(.pilar__hero--nomedia) .pilar__hero-overlay-inner .pilar__titulo,
.pilar__hero:not(.pilar__hero--nomedia) .pilar__hero-overlay-inner .pilar__resumen,
.pilar__hero:not(.pilar__hero--nomedia) .pilar__hero-overlay-inner .categoria__titulo,
.pilar__hero:not(.pilar__hero--nomedia) .pilar__hero-overlay-inner .categoria__resumen {
color: var(--ink-inverse);
}
.pilar__hero:not(.pilar__hero--nomedia) .pilar__hero-overlay-inner a {
color: oklch(0.92 0.06 125);
text-decoration-color: oklch(0.88 0.21 125 / 0.55);
text-decoration-thickness: 1.5px;
}
.pilar__hero:not(.pilar__hero--nomedia) .pilar__hero-overlay-inner a:hover,
.pilar__hero:not(.pilar__hero--nomedia) .pilar__hero-overlay-inner a:focus-visible {
color: var(--accent);
text-decoration-color: var(--accent);
}
.pilar__hero .breadcrumb {
margin-bottom: 1rem;
}
.pilar__hero .breadcrumb li,
.pilar__hero .breadcrumb a {
color: oklch(0.99 0.002 250 / 0.85);
}
.pilar__hero .breadcrumb [aria-current="page"] {
color: var(--ink-inverse);
}
.pilar__hero--nomedia .breadcrumb li,
.pilar__hero--nomedia .breadcrumb a { color: var(--ink-muted); }
.pilar__hero--nomedia .breadcrumb [aria-current="page"] { color: var(--ink); }
.pilar__kicker {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 0.8rem;
padding: 0.3rem 0.7rem;
border-radius: var(--radius-full);
background: oklch(0.99 0.002 250 / 0.18);
backdrop-filter: blur(4px);
color: var(--ink-inverse);
}
.pilar__hero--nomedia .pilar__kicker {
background: var(--accent-soft);
color: var(--accent-ink);
}
.pilar__titulo {
margin: 0 0 0.8rem;
font-size: clamp(1.8rem, 3.4vw + 1rem, 3rem);
font-weight: 700;
letter-spacing: -0.028em;
line-height: 1.05;
max-width: 22ch;
}
.pilar__resumen {
font-size: 1.1rem;
line-height: 1.45;
margin: 0;
max-width: 56ch;
color: oklch(0.99 0.002 250 / 0.92);
}
.pilar__hero--nomedia .pilar__resumen { color: var(--ink-soft); }
.pilar__indice {
max-width: var(--w-reading);
margin: 0 auto 3rem;
padding: 1.6rem 1.8rem;
background: linear-gradient(135deg, var(--bg) 0%, var(--tint-cool) 100%);
border: 1px solid var(--rule);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.pilar__indice::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-3) 100%);
}
.pilar__indice::after {
content: "";
position: absolute;
top: -30px; right: -30px;
width: 140px; height: 140px;
background: radial-gradient(circle, oklch(0.88 0.21 125 / 0.10) 0%, transparent 60%);
pointer-events: none;
}
.pilar__indice-label {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--accent-ink);
background: var(--accent);
padding: 0.35rem 0.75rem;
border-radius: var(--radius-full);
margin-bottom: 1.1rem;
position: relative;
z-index: 1;
}
.pilar__indice ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.2rem;
grid-template-columns: 1fr;
position: relative;
z-index: 1;
counter-reset: idx;
}
@media (min-width: 48em) {
.pilar__indice ul { grid-template-columns: repeat(2, 1fr); gap: 0.2rem 1.5rem; }
}
.pilar__indice li {
margin: 0;
counter-increment: idx;
}
.pilar__indice a {
display: flex;
align-items: baseline;
gap: 0.65rem;
padding: 0.55rem 0.5rem 0.55rem 0;
color: var(--ink-soft);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
border-radius: var(--radius-sm);
transition: color var(--duration-fast), background var(--duration-fast), padding var(--duration-fast);
line-height: 1.4;
}
.pilar__indice a::before {
content: counter(idx, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 600;
color: var(--accent-3);
letter-spacing: 0.04em;
flex-shrink: 0;
}
.pilar__indice a::after {
content: "→";
margin-left: auto;
color: var(--ink-faint);
font-size: 0.9rem;
transition: transform var(--duration-fast), color var(--duration-fast);
}
.pilar__indice a:hover {
color: var(--ink);
background: var(--bg);
padding-left: 0.6rem;
}
.pilar__indice a:hover::after {
transform: translateX(3px);
color: var(--accent-strong);
}
.pilar__contenido {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.2rem;
}
@media (min-width: 48em) {
.pilar__contenido { padding: 0 2rem; }
}
.pilar__contenido > * { max-width: var(--w-reading); margin-left: auto; margin-right: auto; }
.pilar__externos {
background: var(--surface-1);
padding: 3rem 0;
margin-top: 4rem;
}
.pilar__externos-titulo {
font-size: 1.2rem;
margin: 0 0 1.5rem;
}
.pilar__externos-lista {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 48em) {
.pilar__externos-lista { grid-template-columns: repeat(2, 1fr); }
}
.pilar__externos-lista a {
display: block;
padding: 1.2rem 1.4rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
text-decoration: none;
color: var(--ink);
transition: border-color var(--duration), transform var(--duration);
}
.pilar__externos-lista a:hover {
border-color: var(--ink);
transform: translateY(-2px);
}
.pilar__externos-kicker {
display: block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 0.4rem;
}
.pilar__externos-h {
display: block;
font-weight: 600;
font-size: 1rem;
margin-bottom: 0.3rem;
}
.pilar__externos-d {
display: block;
color: var(--ink-soft);
font-size: 0.88rem;
line-height: 1.5;
}
.pilar__spokes {
background: var(--surface-1);
padding: 4rem 0;
margin-top: 4rem;
}
.pilar__spokes > h2 {
max-width: var(--container);
margin: 0 auto 2rem;
padding: 0 1.2rem;
font-size: 1.6rem;
}
@media (min-width: 48em) {
.pilar__spokes > h2 { padding: 0 2rem; }
}
.spokes-grid {
list-style: none;
padding: 0 1.2rem;
margin: 0 auto;
max-width: var(--container);
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 48em) {
.spokes-grid { grid-template-columns: repeat(2, 1fr); padding: 0 2rem; }
}
@media (min-width: 68em) {
.spokes-grid { grid-template-columns: repeat(3, 1fr); }
}
.spokes-grid li { margin: 0; }
.spoke-card {
display: block;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
overflow: hidden;
text-decoration: none;
color: var(--ink);
transition: transform var(--duration), border-color var(--duration), box-shadow var(--duration);
}
.spoke-card:hover {
transform: translateY(-3px);
border-color: var(--ink);
box-shadow: var(--shadow-md);
}
.spoke-card__media {
aspect-ratio: 16 / 10;
background: var(--surface-3);
overflow: hidden;
}
.spoke-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.spoke-card__media--placeholder {
background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
}
.spoke-card__titulo {
padding: 1.2rem 1.4rem 0.4rem;
font-size: 1.05rem;
font-weight: 600;
margin: 0;
}
.spoke-card__desc {
padding: 0 1.4rem 1.4rem;
font-size: 0.9rem;
color: var(--ink-soft);
margin: 0;
line-height: 1.5;
}
/* ==========================================================================
HOME
========================================================================== */
.home-hero {
position: relative;
width: 100%;
min-height: 88vh;
display: flex;
overflow: hidden;
background: var(--brand);
color: var(--ink-inverse);
}
.home-hero__media {
position: absolute;
inset: 0;
z-index: 1;
}
.home-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.32;
}
.home-hero__body {
position: relative;
z-index: 2;
width: 100%;
display: flex;
align-items: center;
padding: 5rem 1.2rem;
}
@media (min-width: 48em) {
.home-hero__body { padding: 6rem 2rem; }
}
.home-hero__body-inner {
width: 100%;
max-width: var(--container);
margin: 0 auto;
}
.home-hero__kicker {
display: inline-block;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.4rem 0.9rem;
background: oklch(0.99 0.002 250 / 0.12);
border: 1px solid oklch(0.99 0.002 250 / 0.18);
color: var(--ink-inverse);
border-radius: var(--radius-full);
margin: 0 0 1.5rem;
}
.home-hero__titulo {
font-size: clamp(2.2rem, 5vw + 1rem, 4.6rem);
font-weight: 700;
letter-spacing: -0.032em;
line-height: 1;
margin: 0 0 1.5rem;
max-width: 16ch;
color: var(--ink-inverse);
}
.home-hero__titulo::after {
content: ".";
color: var(--accent);
}
.home-hero__resumen {
font-size: 1.2rem;
line-height: 1.5;
max-width: 55ch;
margin: 0;
color: oklch(0.99 0.002 250 / 0.85);
}
.home-section-heading {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin: 4rem 0 2.5rem;
}
@media (min-width: 56em) {
.home-section-heading {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
}
}
.home-section-heading__kicker {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.6rem;
}
.home-section-heading h2 {
margin: 0;
font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
max-width: 22ch;
}
.home-section-heading__nota {
margin: 0;
font-size: 0.95rem;
color: var(--ink-soft);
max-width: 38ch;
line-height: 1.5;
}
.home-pilares {
padding-top: 1rem;
padding-bottom: 1rem;
}
.home-pilares__grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 56em) {
.home-pilares__grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
@media (min-width: 80em) {
.home-pilares__grid { grid-template-columns: repeat(3, 1fr); }
}
.pilar-card {
display: flex;
flex-direction: column;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-xl);
overflow: hidden;
text-decoration: none;
color: var(--ink);
transition: transform var(--duration), border-color var(--duration), box-shadow var(--duration);
padding: 0;
}
.pilar-card:hover {
transform: translateY(-4px);
border-color: var(--ink);
box-shadow: var(--shadow-lg);
}
.pilar-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--surface-3);
}
.pilar-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out);
}
.pilar-card:hover .pilar-card__media img { transform: scale(1.04); }
.pilar-card__media--placeholder {
background: linear-gradient(135deg, var(--ink) 0%, oklch(0.30 0.013 250) 100%);
color: var(--ink-inverse);
display: flex;
align-items: center;
justify-content: center;
}
.pilar-card__num {
position: absolute;
top: 1.2rem;
left: 1.4rem;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 500;
padding: 0.3rem 0.65rem;
background: oklch(0.99 0.002 250 / 0.88);
color: var(--ink);
border-radius: var(--radius-sm);
letter-spacing: 0.08em;
z-index: 2;
}
.pilar-card__kicker {
display: block;
padding: 1.4rem 1.5rem 0.5rem;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
}
.pilar-card__titulo {
padding: 0 1.5rem 0.5rem;
margin: 0;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.018em;
}
.pilar-card__resumen {
padding: 0 1.5rem 1rem;
margin: 0;
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.5;
flex: 1;
}
.pilar-card__cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0 1.5rem 1.6rem;
font-size: 0.92rem;
font-weight: 600;
color: var(--brand);
}
.pilar-card__cta::after {
content: "→";
transition: transform var(--duration) var(--ease-out);
}
.pilar-card:hover .pilar-card__cta::after { transform: translateX(4px); }
.home-herramientas {
padding: 4rem 0;
background: var(--surface-1);
margin-top: 4rem;
}
.home-herramientas__grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 56em) {
.home-herramientas__grid { grid-template-columns: repeat(3, 1fr); }
}
.herramienta-card {
display: block;
padding: 1.6rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
text-decoration: none;
color: var(--ink);
transition: transform var(--duration), border-color var(--duration), box-shadow var(--duration);
}
.herramienta-card:hover {
transform: translateY(-3px);
border-color: var(--ink);
box-shadow: var(--shadow-md);
}
.herramienta-card__label {
display: inline-block;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-ink);
background: var(--accent);
padding: 0.25rem 0.6rem;
border-radius: var(--radius-full);
margin-bottom: 0.9rem;
}
.herramienta-card__titulo {
margin: 0 0 0.6rem;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: -0.018em;
}
.herramienta-card__desc {
margin: 0;
font-size: 0.92rem;
color: var(--ink-soft);
line-height: 1.5;
}
.home-manifesto {
padding: 4rem 0 1rem;
}
.home-manifesto__lista {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 56em) {
.home-manifesto__lista { grid-template-columns: repeat(3, 1fr); }
}
.home-manifesto__item {
padding: 1.8rem;
background: var(--surface-1);
border-radius: var(--radius-lg);
border: 1px solid var(--rule);
margin: 0;
}
.home-manifesto__num {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 500;
color: var(--accent-strong);
letter-spacing: 0.08em;
margin-bottom: 0.8rem;
}
.home-manifesto__titulo {
margin: 0 0 0.6rem;
font-size: 1.15rem;
font-weight: 600;
}
.home-manifesto__texto {
margin: 0;
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.5;
}
.home-narrativa {
padding: 3rem 0 5rem;
}
.home-narrativa-inner {
max-width: var(--w-reading);
margin: 0 auto;
padding: 0 1.2rem;
font-size: 1.05rem;
line-height: 1.7;
color: var(--ink-soft);
}
@media (min-width: 48em) {
.home-narrativa-inner { padding: 0 2rem; }
}
/* ==========================================================================
CATEGORÍA
========================================================================== */
.categoria {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.2rem 4rem;
}
.categoria--con-hero {
padding-top: 0;
}
@media (min-width: 48em) {
.categoria { padding: 0 2rem 5rem; }
}
.categoria__header {
max-width: var(--w-reading);
margin: 1rem 0 2rem;
}
.categoria__kicker {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.7rem;
}
.categoria__titulo {
margin: 0 0 0.7rem;
font-size: clamp(2rem, 3.4vw + 1rem, 3rem);
letter-spacing: -0.028em;
line-height: 1.05;
}
.categoria__resumen {
font-size: 1.1rem;
color: var(--ink-soft);
line-height: 1.5;
margin: 0;
max-width: 56ch;
}
.categoria__intro {
max-width: var(--w-reading);
margin: 0 0 2.5rem;
color: var(--ink-soft);
font-size: 1rem;
line-height: 1.6;
}
.categoria__subheading {
font-size: 1.4rem;
margin: 3rem 0 1.5rem;
letter-spacing: -0.022em;
}
.categoria__pilares { margin-bottom: 3rem; }
.categoria__listado {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 48em) {
.categoria__listado { grid-template-columns: repeat(2, 1fr); }
}
.categoria__listado li { margin: 0; }
.categoria__listado article {
padding: 1.2rem 1.4rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
transition: border-color var(--duration), transform var(--duration);
height: 100%;
}
.categoria__listado article:hover {
border-color: var(--ink);
transform: translateY(-2px);
}
.categoria__listado h3 {
margin: 0 0 0.5rem;
font-size: 1.05rem;
}
.categoria__listado h3 a {
text-decoration: none;
color: var(--ink);
}
.categoria__listado h3 a:hover { color: var(--brand); }
.categoria__listado p {
margin: 0;
color: var(--ink-soft);
font-size: 0.92rem;
line-height: 1.5;
}
.categoria__vacia {
color: var(--ink-muted);
font-style: italic;
}
/* ==========================================================================
GLOSARIO
========================================================================== */
.glosario-ficha {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.2rem 4rem;
}
@media (min-width: 48em) {
.glosario-ficha { padding: 0 2rem 5rem; }
}
.glosario-link {
border-bottom: 1px dashed var(--rule-strong);
text-decoration: none;
}
.glosario-link:hover {
border-bottom-color: var(--brand);
color: var(--brand);
}
/* ==========================================================================
HERRAMIENTAS HUB — /herramientas/ con grupos calculadoras vs mapas
========================================================================== */
.herramientas-hub {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.2rem 4rem;
}
@media (min-width: 48em) {
.herramientas-hub { padding: 0 2rem 5rem; }
}
.herramientas-hub__header {
margin: 1rem 0 2.5rem;
max-width: var(--w-reading);
}
.herramientas-hub__kicker {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.7rem;
}
.herramientas-hub__titulo {
margin: 0 0 0.7rem;
font-size: clamp(2rem, 3.4vw + 1rem, 3rem);
font-weight: 700;
letter-spacing: -0.028em;
}
.herramientas-hub__resumen {
font-size: 1.1rem;
color: var(--ink-soft);
line-height: 1.5;
margin: 0;
max-width: 56ch;
}
.herramientas-grupo {
margin: 3rem 0;
}
.herramientas-grupo__header {
margin: 0 0 1.5rem;
max-width: var(--w-reading);
}
.herramientas-grupo__kicker {
display: inline-block;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
border-radius: var(--radius-full);
margin: 0 0 0.8rem;
}
.herramientas-grupo--calculadoras .herramientas-grupo__kicker {
background: var(--accent);
color: var(--accent-ink);
}
.herramientas-grupo--mapas .herramientas-grupo__kicker {
background: var(--accent-3-soft);
color: var(--accent-3);
}
.herramientas-grupo__titulo {
margin: 0 0 0.5rem;
font-size: 1.4rem;
font-weight: 650;
letter-spacing: -0.022em;
}
.herramientas-grupo__intro {
margin: 0;
color: var(--ink-soft);
font-size: 0.96rem;
line-height: 1.55;
}
.herramientas-grupo__grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 56em) {
.herramientas-grupo__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 80em) {
.herramientas-grupo__grid { grid-template-columns: repeat(3, 1fr); }
}
/* ==========================================================================
HERRAMIENTAS layout
========================================================================== */
.herramienta {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.2rem 4rem;
}
@media (min-width: 48em) {
.herramienta { padding: 0 2rem 5rem; }
}
.herramienta__header {
max-width: var(--w-reading);
margin: 1rem 0 2rem;
}
.herramienta__header h1 {
margin: 0 0 0.7rem;
}
.herramienta__resumen {
font-size: 1.1rem;
color: var(--ink-soft);
line-height: 1.5;
margin: 0;
max-width: 56ch;
}
.herramienta__badge {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 0.35rem 0.75rem;
border-radius: var(--radius-full);
margin: 0 0 0.9rem;
}
.herramienta__badge--calculadora {
background: var(--accent);
color: var(--accent-ink);
}
.herramienta__badge--calculadora::before {
content: "▣";
font-size: 0.85rem;
}
.herramienta__badge--matriz {
background: var(--accent-3-soft);
color: var(--accent-3);
}
.herramienta__badge--matriz::before {
content: "◫";
font-size: 0.85rem;
}
.herramienta__badge--comparador {
background: var(--success-soft);
color: var(--success);
}
/* Card differentiation for /herramientas/ hub */
.herramienta-card--calculadora {
border-left: 3px solid var(--accent-strong);
}
.herramienta-card--mapa {
border-left: 3px solid var(--accent-3);
}
.herramienta-card__label--calculadora {
background: var(--accent);
color: var(--accent-ink);
}
.herramienta-card__label--mapa {
background: var(--accent-3-soft);
color: var(--accent-3);
}
.herramienta-card__cta {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin-top: 1rem;
font-weight: 600;
font-size: 0.88rem;
color: var(--brand);
}
.herramienta-card__cta span {
transition: transform var(--duration) var(--ease-out);
}
.herramienta-card:hover .herramienta-card__cta span {
transform: translateX(4px);
}
.herramienta__widget {
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 1.8rem;
margin: 2rem 0;
max-width: var(--w-reading);
}
.herramienta__loader {
color: var(--ink-muted);
font-style: italic;
}
.herramienta__tabla-wrap {
margin: 2rem 0;
overflow-x: auto;
}
.herramienta__tabla {
width: 100%;
border-collapse: collapse;
}
.herramienta__tabla th,
.herramienta__tabla td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid var(--rule);
vertical-align: top;
}
.herramienta__tabla thead th {
background: var(--surface-2);
font-weight: 600;
}
.herramienta__grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
margin: 2rem 0;
}
@media (min-width: 56em) {
.herramienta__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 86em) {
.herramienta__grid { grid-template-columns: repeat(3, 1fr); }
}
.herramienta__grupo {
padding: 1.6rem 1.7rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
transition: box-shadow var(--duration), border-color var(--duration);
}
.herramienta__grupo::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 4px;
background: var(--ink);
transition: background var(--duration);
}
.herramienta__grupo:nth-child(3n+1)::before { background: linear-gradient(90deg, var(--accent-3) 0%, var(--accent) 100%); }
.herramienta__grupo:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--success) 0%, var(--accent) 100%); }
.herramienta__grupo:nth-child(3n)::before { background: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 100%); }
.herramienta__grupo:hover { box-shadow: var(--shadow-md); border-color: var(--rule-strong); }
.herramienta__grupo h2 {
margin: 0.4rem 0 0.4rem;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -0.018em;
}
.herramienta__grupo-desc,
.matriz__grupo-desc {
font-size: 0.88rem;
color: var(--ink-soft);
line-height: 1.5;
margin: 0 0 1.2rem;
padding-bottom: 1rem;
border-bottom: 1px dashed var(--rule);
}
.herramienta__grupo ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.45rem;
}
.herramienta__grupo li { margin: 0; }
.herramienta__grupo a {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"label arrow"
"nota nota";
gap: 0.45rem 0.7rem;
align-items: start;
padding: 0.8rem 0.95rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--ink);
font-size: 0.94rem;
transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
position: relative;
}
.herramienta__grupo a::after {
content: "→";
grid-area: arrow;
color: var(--ink-faint);
font-size: 0.95rem;
flex-shrink: 0;
transition: transform var(--duration-fast), color var(--duration-fast);
line-height: 1.5;
}
.herramienta__grupo a:hover,
.herramienta__grupo a:focus-visible {
background: var(--bg);
border-color: var(--ink);
color: var(--ink);
transform: translateX(2px);
}
.herramienta__grupo a:hover::after,
.herramienta__grupo a:focus-visible::after {
color: var(--accent-strong);
transform: translateX(3px);
}
.herramienta__grupo .herramienta__label,
.herramienta__grupo .matriz__label {
grid-area: label;
font-weight: 600;
color: var(--ink);
min-width: 0;
line-height: 1.35;
}
.herramienta__grupo a em {
grid-area: nota;
justify-self: start;
font-style: normal;
font-size: 0.76rem;
font-weight: 500;
color: var(--ink-muted);
padding: 0.2rem 0.55rem;
background: var(--surface-2);
border-radius: var(--radius-full);
white-space: normal;
max-width: 100%;
}
.herramienta__grupo a:hover em {
background: var(--accent-soft);
color: var(--accent-ink);
}
.herramienta__narrativa {
max-width: var(--w-reading);
margin-top: 2rem;
font-size: 1.02rem;
line-height: 1.65;
}
/* ==========================================================================
WIDGETS GENÉRICOS — base para todas las calculadoras interactivas
Estilos compartidos por simulador minicredito, calc hipoteca, asnef, etc.
========================================================================== */
.widget {
display: block;
}
.widget__fila {
display: grid;
gap: 1.4rem;
grid-template-columns: 1fr;
align-items: stretch;
}
@media (min-width: 48em) {
.widget__fila--cols-2 { grid-template-columns: 1fr 1fr; }
.widget__fila--cols-3 { grid-template-columns: repeat(3, 1fr); }
}
/* Fila ASNEF: 2 cols (inclusión + estado) o 3 cols (+ fecha pago) según estado */
.widget__fila--asnef {
display: grid;
gap: 1.4rem;
grid-template-columns: 1fr;
}
@media (min-width: 48em) {
.widget__fila--asnef { grid-template-columns: 1fr 1fr; }
.widget__fila--asnef:has([data-fecha-pago]:not([hidden])) {
grid-template-columns: 1fr 1fr 1fr;
}
}
.widget__campo {
display: flex;
flex-direction: column;
margin: 0;
}
.widget__label {
display: flex;
flex-direction: column;
flex: 0 0 auto;
font-weight: 600;
color: var(--ink-inverse);
font-size: 0.98rem;
line-height: 1.35;
margin-bottom: 0.55rem;
letter-spacing: -0.012em;
/* Alto mínimo que cubre label + hint para alinear inputs siguientes */
min-height: 3.1rem;
}
.widget__hint {
display: block;
font-size: 0.78rem;
color: oklch(0.99 0.002 250 / 0.55);
font-weight: 400;
margin-top: 0.2rem;
}
/* Cuando el label NO tiene hint, sigue ocupando el min-height (espacio reservado) */
.widget__label:not(:has(.widget__hint))::after {
content: "";
display: block;
min-height: 1.05rem;
margin-top: 0.2rem;
}
.widget__input,
.widget__select {
display: block;
width: 100%;
padding: 0.9rem 1rem;
font-size: 1.02rem;
font-family: inherit;
font-weight: 500;
color: var(--ink-inverse);
border: 1.5px solid oklch(0.99 0.002 250 / 0.18);
border-radius: var(--radius-md);
background: oklch(0.99 0.002 250 / 0.06);
transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
font-variant-numeric: tabular-nums;
}
.widget__input::placeholder { color: oklch(0.99 0.002 250 / 0.32); }
.widget__input:focus,
.widget__select:focus {
border-color: var(--accent);
outline: none;
background: oklch(0.99 0.002 250 / 0.10);
box-shadow: 0 0 0 4px oklch(0.88 0.21 125 / 0.18);
}
.widget__select option {
background: var(--brand);
color: var(--ink-inverse);
}
.widget__range {
display: block;
width: 100%;
margin: 0.6rem 0 0.1rem;
-webkit-appearance: none;
appearance: none;
height: 6px;
background: oklch(0.99 0.002 250 / 0.12);
border-radius: 999px;
cursor: pointer;
outline: none;
}
/* Combinación input numérico + slider: refresquemos el campo como un par */
.widget__input-range-pair {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.widget__input-range-pair .widget__input {
padding: 0.75rem 0.9rem;
font-size: 1.05rem;
font-weight: 600;
}
.widget__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
background: var(--accent);
border-radius: 50%;
cursor: pointer;
border: 2px solid var(--brand);
box-shadow: 0 2px 6px oklch(0.88 0.21 125 / 0.5);
transition: transform var(--duration-fast);
}
.widget__range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.widget__range::-moz-range-thumb {
width: 22px;
height: 22px;
background: var(--accent);
border-radius: 50%;
cursor: pointer;
border: 2px solid var(--brand);
box-shadow: 0 2px 6px oklch(0.88 0.21 125 / 0.5);
}
.widget__valor {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
font-size: 1.55rem;
font-weight: 700;
color: var(--accent);
font-variant-numeric: tabular-nums;
letter-spacing: -0.024em;
line-height: 1;
margin-top: 0.2rem;
}
.widget__valor-unidad {
font-size: 0.92rem;
color: oklch(0.99 0.002 250 / 0.55);
font-weight: 500;
letter-spacing: 0;
}
.widget__divider {
height: 1px;
background: oklch(0.99 0.002 250 / 0.10);
margin: 1.6rem 0;
border: 0;
}
.widget__resultado {
margin-top: 1.8rem;
padding: 1.8rem;
background: linear-gradient(160deg, oklch(0.96 0.012 250) 0%, oklch(0.94 0.014 235) 100%);
border: 1px solid oklch(0.99 0.002 250 / 0.18);
border-radius: var(--radius-lg);
color: var(--ink);
box-shadow: 0 4px 18px -6px oklch(0.16 0.014 250 / 0.20);
}
.widget__resultado .widget__tabla {
background: oklch(0.99 0.002 250 / 0.55);
border-radius: var(--radius-md);
overflow: hidden;
}
.widget__resultado .widget__tabla th {
background: oklch(0.93 0.012 250 / 0.65);
color: var(--ink);
}
.widget__resultado .widget__tabla tbody tr:nth-child(even) td {
background: oklch(0.99 0.002 250 / 0.50);
}
.widget__resultado-titulo {
margin: 0 0 0.4rem;
font-size: 1rem;
font-weight: 600;
color: var(--ink-muted);
letter-spacing: 0.02em;
}
.widget__resultado-cifra-principal {
font-size: 2.4rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -0.028em;
line-height: 1;
margin: 0;
color: var(--brand);
}
.widget__resultado-cifra-principal em {
font-style: normal;
font-size: 1.4rem;
font-weight: 500;
color: var(--ink-muted);
letter-spacing: 0;
}
.widget__resultado-meta {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
margin-top: 1.4rem;
padding-top: 1.4rem;
border-top: 1px solid var(--rule);
}
@media (min-width: 42em) {
.widget__resultado-meta { grid-template-columns: repeat(3, 1fr); }
}
/* Hero compacto: cifra principal a la izquierda + 3 stats a la derecha en una línea */
.widget__resultado-hero {
display: grid;
gap: 1.4rem;
grid-template-columns: 1fr;
align-items: end;
}
@media (min-width: 56em) {
.widget__resultado-hero {
grid-template-columns: auto 1fr;
gap: 2.5rem;
}
}
.widget__resultado-hero-cifra { min-width: 0; }
.widget__resultado-hero-stats {
display: grid;
gap: 0.8rem;
grid-template-columns: repeat(3, 1fr);
padding-top: 0.6rem;
border-top: 1px solid var(--rule);
}
@media (min-width: 56em) {
.widget__resultado-hero-stats {
border-top: 0;
padding-top: 0;
padding-left: 2rem;
border-left: 1px solid var(--rule);
}
}
.widget__resultado-hero-stats .widget__resultado-stat-valor {
font-size: 1.05rem;
}
.widget__resultado-hero-stats .widget__resultado-stat-label {
font-size: 0.68rem;
}
.widget__resultado-stat {
display: block;
}
.widget__resultado-stat-label {
display: block;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 0.25rem;
}
.widget__resultado-stat-valor {
display: block;
font-size: 1.2rem;
font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: -0.018em;
}
.widget__tabla {
width: 100%;
border-collapse: collapse;
margin: 1.2rem 0 0;
font-size: 0.92rem;
}
.widget__tabla th,
.widget__tabla td {
padding: 0.7rem 0.9rem;
text-align: left;
border-bottom: 1px solid var(--rule);
font-variant-numeric: tabular-nums;
}
.widget__tabla thead th {
background: var(--surface-2);
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.01em;
color: var(--ink-muted);
}
.widget__tabla tbody tr:nth-child(even) td {
background: var(--surface-1);
}
.widget__cta-bloque {
margin-top: 1.6rem;
padding: 1.4rem;
background: linear-gradient(135deg, var(--accent-soft) 0%, var(--tint-warm) 100%);
border-radius: var(--radius-lg);
border-left: 3px solid var(--accent-strong);
}
.widget__cta-bloque-titulo {
margin: 0 0 0.4rem;
font-size: 0.98rem;
font-weight: 600;
color: var(--ink);
}
.widget__cta-bloque-texto {
margin: 0 0 0.9rem;
font-size: 0.9rem;
color: var(--ink-soft);
line-height: 1.5;
}
/* Resultados con listado de opciones (simulador minicredito) */
.widget__opciones {
display: grid;
gap: 0.9rem;
grid-template-columns: 1fr;
margin: 1rem 0 0;
}
.widget__opcion {
display: grid;
grid-template-columns: 96px 1fr auto;
gap: 1rem;
align-items: center;
padding: 1rem 1.1rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
transition: border-color var(--duration), box-shadow var(--duration), transform var(--duration);
}
.widget__opcion:hover {
border-color: var(--ink);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.widget__opcion--best {
border-color: var(--accent);
border-width: 2px;
background: linear-gradient(180deg, var(--bg) 0%, var(--accent-soft) 100%);
position: relative;
}
.widget__opcion--best::before {
content: "Mejor opción";
position: absolute;
top: -10px;
left: 1rem;
background: var(--accent);
color: var(--accent-ink);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.25rem 0.6rem;
border-radius: var(--radius-full);
}
.widget__opcion-brand {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--brand-color, var(--brand));
color: var(--ink-inverse);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.3rem;
letter-spacing: -0.04em;
flex-shrink: 0;
}
.widget__opcion-info { min-width: 0; }
.widget__opcion-nombre {
margin: 0;
font-size: 1.02rem;
font-weight: 600;
letter-spacing: -0.018em;
}
.widget__opcion-meta {
display: flex;
flex-wrap: wrap;
gap: 0.3rem 0.7rem;
margin-top: 0.25rem;
font-size: 0.82rem;
color: var(--ink-muted);
}
.widget__opcion-meta strong {
color: var(--ink);
font-weight: 600;
}
.widget__opcion-meta--gratis { color: var(--success); font-weight: 600; }
.widget__opcion-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.65rem 1rem;
background: var(--accent);
color: var(--accent-ink);
font-weight: 700;
font-size: 0.88rem;
text-decoration: none;
border-radius: var(--radius-md);
white-space: nowrap;
transition: background var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
box-shadow: 0 2px 8px oklch(0.88 0.21 125 / 0.30);
}
.widget__opcion-cta:hover {
background: var(--accent-strong);
color: var(--accent-ink);
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 4px 12px oklch(0.88 0.21 125 / 0.45);
}
@media (max-width: 47.99em) {
.widget__opcion {
grid-template-columns: 80px 1fr;
grid-template-areas: "brand info" "cta cta";
gap: 0.7rem;
padding: 0.9rem;
}
.widget__opcion-brand { grid-area: brand; }
.widget__opcion-brand--logo { width: 80px !important; height: 54px !important; }
.widget__opcion-info { grid-area: info; }
.widget__opcion-cta { grid-area: cta; justify-content: center; }
}
.widget__vacio {
padding: 2rem;
text-align: center;
color: var(--ink-muted);
font-style: italic;
}
.widget__nota {
font-size: 0.78rem;
color: var(--ink-muted);
margin-top: 1rem;
line-height: 1.5;
}
/* Chips/checkboxes para filtros */
.widget__chips {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 0.4rem;
}
/* Variante toolbar: filtros sin encabezado, pegados a la fila anterior */
.widget__chips--toolbar {
margin-top: 1.4rem;
padding-top: 1.2rem;
border-top: 1px solid oklch(0.99 0.002 250 / 0.10);
}
.widget__chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.95rem;
background: oklch(0.99 0.002 250 / 0.04);
border: 1.5px solid oklch(0.99 0.002 250 / 0.18);
border-radius: var(--radius-full);
cursor: pointer;
font-size: 0.88rem;
font-weight: 500;
color: var(--ink-inverse);
transition: background var(--duration-fast), border-color var(--duration-fast);
margin: 0;
}
.widget__chip:hover {
background: oklch(0.99 0.002 250 / 0.10);
border-color: oklch(0.99 0.002 250 / 0.35);
}
.widget__chip:has(input:checked) {
background: oklch(0.88 0.21 125 / 0.18);
border-color: var(--accent);
color: var(--ink-inverse);
}
.widget__chip input[type="checkbox"] {
accent-color: var(--accent);
width: 16px;
height: 16px;
margin: 0;
}
/* Meta badges en opciones (ASNEF, etc.) */
.widget__opcion-meta--asnef {
display: inline-block;
padding: 0.1rem 0.45rem;
background: var(--accent-3-soft);
color: var(--accent-3);
border-radius: var(--radius-sm);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
}
/* Filas de deudas en simulador de reunificación */
.widget__deuda-fila {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 0.6rem;
margin-bottom: 0.6rem;
align-items: center;
}
.widget__btn-remove {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
border: 1.5px solid oklch(0.99 0.002 250 / 0.18);
background: oklch(0.99 0.002 250 / 0.04);
color: var(--ink-inverse);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
transition: background var(--duration-fast), border-color var(--duration-fast);
display: flex;
align-items: center;
justify-content: center;
}
.widget__btn-remove:hover {
background: oklch(0.56 0.22 25 / 0.18);
border-color: oklch(0.56 0.22 25 / 0.55);
}
.widget__btn-add {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 1rem;
background: oklch(0.99 0.002 250 / 0.04);
border: 1.5px dashed oklch(0.99 0.002 250 / 0.35);
border-radius: var(--radius-md);
color: var(--ink-inverse);
font-family: inherit;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
margin-top: 0.5rem;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
.widget__btn-add:hover {
background: oklch(0.88 0.21 125 / 0.10);
border-color: var(--accent);
border-style: solid;
}
/* Inputs dentro de resultado con fondo claro (no necesitan estilo oscuro) */
.widget__resultado .widget__opcion-cta {
text-decoration: none;
}
/* Tabla dentro del resultado del widget hipoteca */
.widget__resultado .widget__tabla {
font-size: 0.88rem;
}
.widget__resultado .widget__tabla th {
background: var(--surface-2);
}
/* Botón submit reutilizable */
.widget__submit {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.95rem 1.6rem;
background: var(--accent);
color: var(--accent-ink);
font-family: inherit;
font-weight: 700;
font-size: 1rem;
border: 1.5px solid var(--accent);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
margin-top: 1.5rem;
min-height: 48px;
box-shadow: 0 4px 14px -2px oklch(0.88 0.21 125 / 0.45);
}
.widget__submit:hover {
background: var(--accent-strong);
border-color: var(--accent-strong);
transform: translateY(-2px);
box-shadow: 0 8px 24px -4px oklch(0.88 0.21 125 / 0.55);
}
/* ==========================================================================
WIDGET VIABILIDAD — calculadora rediseñada premium
========================================================================== */
.herramienta__widget {
background:
radial-gradient(ellipse 110% 70% at 50% 0%, oklch(0.88 0.21 125 / 0.10) 0%, transparent 55%),
linear-gradient(160deg, var(--brand) 0%, oklch(0.10 0.018 270) 100%);
border: 1px solid oklch(0.99 0.002 250 / 0.08);
border-radius: var(--radius-xl);
padding: 2rem 1.6rem;
margin: 2rem 0;
/* Ancho como el artículo: ocupa el 100% del padre (.herramienta) que ya tiene
max-width: var(--container) y padding lateral propio. */
max-width: none;
color: var(--ink-inverse);
box-shadow: var(--shadow-brand);
position: relative;
overflow: hidden;
}
.herramienta__widget::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
pointer-events: none;
z-index: 0;
}
.herramienta__widget > * { position: relative; z-index: 1; }
@media (min-width: 48em) {
.herramienta__widget {
padding: 2.8rem 2.5rem;
}
}
.herramienta__loader {
color: oklch(0.99 0.002 250 / 0.7);
font-style: italic;
}
.widget-viab { display: block; }
.widget-viab__pasos {
list-style: none;
padding: 0;
margin: 0;
}
.widget-viab__pasos li {
display: none;
margin: 0;
animation: fadeUp 0.4s var(--ease-out) both;
}
.widget-viab__pasos li.is-active { display: block; }
.widget-viab label {
display: block;
font-weight: 600;
color: var(--ink-inverse);
font-size: 1.05rem;
line-height: 1.4;
margin-bottom: 0.6rem;
letter-spacing: -0.012em;
}
.widget-viab input[type="number"],
.widget-viab select {
display: block;
width: 100%;
padding: 0.95rem 1.05rem;
font-size: 1.05rem;
font-family: inherit;
font-weight: 500;
color: var(--ink-inverse);
border: 1.5px solid oklch(0.99 0.002 250 / 0.18);
border-radius: var(--radius-md);
background: oklch(0.99 0.002 250 / 0.06);
margin-top: 0.6rem;
transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
font-variant-numeric: tabular-nums;
}
.widget-viab input::placeholder { color: oklch(0.99 0.002 250 / 0.35); }
.widget-viab input:focus,
.widget-viab select:focus {
border-color: var(--accent);
outline: none;
background: oklch(0.99 0.002 250 / 0.10);
box-shadow: 0 0 0 4px oklch(0.88 0.21 125 / 0.18);
}
.widget-viab select option {
background: var(--brand);
color: var(--ink-inverse);
}
.widget-viab__radio {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.7rem;
}
@media (min-width: 48em) {
.widget-viab__radio { flex-direction: row; gap: 0.8rem; }
}
.widget-viab__radio label {
font-weight: 500;
cursor: pointer;
padding: 0.7rem 1rem;
border: 1.5px solid oklch(0.99 0.002 250 / 0.18);
border-radius: var(--radius-md);
background: oklch(0.99 0.002 250 / 0.04);
font-size: 0.96rem;
margin: 0;
display: flex;
align-items: center;
gap: 0.55rem;
transition: background var(--duration-fast), border-color var(--duration-fast);
flex: 1;
}
.widget-viab__radio label:hover {
background: oklch(0.99 0.002 250 / 0.10);
border-color: oklch(0.99 0.002 250 / 0.35);
}
.widget-viab__radio input[type="radio"] {
accent-color: var(--accent);
width: 18px;
height: 18px;
margin: 0;
flex-shrink: 0;
}
.widget-viab__radio label:has(input:checked) {
background: oklch(0.88 0.21 125 / 0.18);
border-color: var(--accent);
}
.widget-viab__botonera {
display: flex;
align-items: center;
gap: 0.8rem;
margin-top: 1.8rem;
flex-wrap: wrap;
padding-top: 1.5rem;
border-top: 1px solid oklch(0.99 0.002 250 / 0.12);
}
.widget-viab__progreso {
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: oklch(0.99 0.002 250 / 0.6);
margin-left: auto;
font-variant-numeric: tabular-nums;
}
.widget-viab__sig,
.widget-viab__atras,
.widget-viab__calcular,
.widget-viab__reiniciar {
padding: 0.8rem 1.3rem;
font-size: 0.95rem;
font-weight: 700;
font-family: inherit;
border-radius: var(--radius-md);
border: 1.5px solid oklch(0.99 0.002 250 / 0.18);
background: oklch(0.99 0.002 250 / 0.04);
color: var(--ink-inverse);
cursor: pointer;
transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
min-height: 44px;
}
.widget-viab__sig,
.widget-viab__calcular {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
box-shadow: 0 4px 14px -2px oklch(0.88 0.21 125 / 0.45);
}
.widget-viab__sig:hover,
.widget-viab__calcular:hover {
background: var(--accent-strong);
border-color: var(--accent-strong);
transform: translateY(-2px);
box-shadow: 0 8px 24px -4px oklch(0.88 0.21 125 / 0.55);
}
.widget-viab__atras:hover,
.widget-viab__reiniciar:hover {
background: oklch(0.99 0.002 250 / 0.10);
border-color: oklch(0.99 0.002 250 / 0.35);
}
.widget-viab__resultado {
padding: 1.8rem;
background: var(--bg);
border-radius: var(--radius-lg);
color: var(--ink);
margin-top: 0.5rem;
box-shadow: 0 8px 32px -8px oklch(0.16 0.014 250 / 0.30);
}
.widget-viab__veredicto {
margin-top: 0;
font-size: 1.4rem;
font-weight: 700;
letter-spacing: -0.022em;
}
.widget-viab__veredicto--viable {
color: var(--success);
padding: 0.4rem 0.9rem 0.4rem 1.5rem;
background: var(--success-soft);
border-radius: var(--radius-md);
position: relative;
display: inline-block;
}
.widget-viab__veredicto--viable::before {
content: "✓";
position: absolute;
left: 0.5rem;
font-weight: 700;
}
.widget-viab__veredicto--no-viable {
color: var(--danger);
padding: 0.4rem 0.9rem 0.4rem 1.5rem;
background: var(--danger-soft);
border-radius: var(--radius-md);
position: relative;
display: inline-block;
}
.widget-viab__veredicto--no-viable::before {
content: "×";
position: absolute;
left: 0.55rem;
font-weight: 700;
}
.widget-viab__cifra {
font-size: 1.1rem;
padding: 1rem 1.2rem;
background: var(--accent-soft);
border-radius: var(--radius-md);
border-left: 3px solid var(--accent);
margin: 1.2rem 0;
}
.widget-viab__cifra strong { color: var(--ink); }
.widget-viab__alertas,
.widget-viab__alternativas {
margin-top: 0.5rem;
}
.widget-viab__alertas li,
.widget-viab__alternativas li {
margin-top: 0.6rem;
line-height: 1.55;
}
.widget-viab__reiniciar {
margin-top: 1.5rem;
background: transparent;
border: 1px solid var(--rule-strong);
color: var(--ink);
box-shadow: none;
}
.widget-viab__reiniciar:hover {
background: var(--surface-2);
transform: none;
box-shadow: none;
}
/* ==========================================================================
LEGAL
========================================================================== */
.legal {
max-width: var(--w-reading);
margin: 0 auto;
padding: 1rem 1.2rem 4rem;
}
@media (min-width: 48em) {
.legal { padding: 1rem 2rem 5rem; }
}
.legal__header { margin: 1rem 0 2rem; }
.legal__titulo {
margin: 0 0 0.5rem;
}
.legal__meta {
font-size: 0.85rem;
color: var(--ink-muted);
}
.legal__cuerpo {
font-size: 1rem;
line-height: 1.65;
}
.equipo-perfil {
display: flex;
gap: 1.5rem;
margin-bottom: 2rem;
flex-direction: column;
}
@media (min-width: 48em) {
.equipo-perfil { flex-direction: row; align-items: flex-start; }
}
.equipo-perfil__foto {
margin: 0;
}
.equipo-perfil__foto img {
width: 140px;
height: 140px;
border-radius: var(--radius-lg);
object-fit: cover;
}
.equipo-perfil__nombre {
margin: 0 0 0.3rem;
}
.equipo-perfil__formacion {
font-size: 0.92rem;
color: var(--ink-soft);
margin: 0;
}
/* ==========================================================================
CTA BLOCK (genérico — uso en posts)
========================================================================== */
.cta-block {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.6rem 1.8rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-left: 3px solid var(--accent);
border-radius: var(--radius-lg);
margin: 2rem 0;
max-width: var(--w-reading);
}
@media (min-width: 42em) {
.cta-block {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
}
.cta-block__titulo {
margin: 0 0 0.4rem;
font-size: 1.05rem;
font-weight: 600;
}
.cta-block__texto {
margin: 0;
color: var(--ink-soft);
font-size: 0.95rem;
}
.cta-block__enlace {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.7rem 1.1rem;
background: var(--brand);
color: var(--ink-inverse);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border-radius: var(--radius-md);
white-space: nowrap;
transition: background var(--duration-fast);
}
.cta-block__enlace:hover {
background: var(--brand-strong);
color: var(--ink-inverse);
}
/* ==========================================================================
KOVA — slot + soft + sticky
========================================================================== */
.kova {
max-width: calc(var(--container) - 2.4rem);
margin: 4rem auto 2rem;
padding: 2.2rem 1.8rem;
background: linear-gradient(135deg, var(--brand) 0%, oklch(0.10 0.018 270) 100%);
color: var(--ink-inverse);
border-radius: var(--radius-xl);
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
position: relative;
overflow: hidden;
box-shadow: 0 20px 50px -20px oklch(0.16 0.014 250 / 0.30);
}
.kova::before {
content: "";
position: absolute;
top: -50%;
right: -20%;
width: 60%;
height: 180%;
background: radial-gradient(circle, oklch(0.88 0.21 125 / 0.18) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.kova > * { position: relative; z-index: 1; }
@media (min-width: 48em) {
.kova {
max-width: calc(var(--container) - 4rem);
padding: 3rem;
grid-template-columns: 1.4fr 1fr;
align-items: center;
}
}
@media (min-width: 80em) {
.kova { max-width: var(--container); }
}
.kova__kicker {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 0.7rem;
}
.kova__heading {
margin: 0 0 0.8rem;
font-size: clamp(1.4rem, 2vw + 1rem, 2rem);
font-weight: 700;
color: var(--ink-inverse);
letter-spacing: -0.022em;
}
.kova__sub {
margin: 0;
font-size: 1rem;
color: oklch(0.99 0.002 250 / 0.78);
line-height: 1.5;
}
.kova__cta-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 1rem 1.5rem;
background: var(--accent);
color: var(--accent-ink);
font-weight: 700;
font-size: 1rem;
text-decoration: none;
border-radius: var(--radius-md);
transition: background var(--duration-fast), transform var(--duration-fast);
}
.kova__cta-btn:hover {
background: var(--accent-strong);
color: var(--accent-ink);
text-decoration: none;
transform: translateY(-2px);
}
.kova__cta-icon {
transition: transform var(--duration);
}
.kova__cta-btn:hover .kova__cta-icon {
transform: translateX(4px);
}
.kova__cta-meta {
margin: 0.8rem 0 0;
font-size: 0.82rem;
color: oklch(0.99 0.002 250 / 0.62);
}
.kova__frame iframe {
width: 100%;
min-height: 520px;
border: 0;
border-radius: var(--radius-md);
background: var(--bg);
}
.kova__placeholder {
padding: 1.5rem;
background: oklch(0.99 0.002 250 / 0.08);
border-radius: var(--radius-md);
font-size: 0.95rem;
}
.kova-soft {
max-width: calc(var(--w-reading) - 2.4rem);
margin: 1.5rem auto;
padding: 1.1rem 1.3rem;
background: linear-gradient(135deg, var(--accent-soft) 0%, var(--tint-warm) 100%);
border-left: 3px solid var(--accent-strong);
border-radius: var(--radius-md);
font-size: 0.96rem;
color: var(--ink);
box-shadow: var(--shadow-xs);
transition: box-shadow var(--duration), transform var(--duration);
}
.kova-soft:hover {
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
@media (min-width: 48em) {
.kova-soft { max-width: calc(var(--w-reading) - 4rem); }
}
@media (min-width: 56em) {
.kova-soft { max-width: var(--w-reading); }
}
.kova-soft__link {
font-weight: 700;
color: var(--brand);
text-decoration-color: var(--accent-strong);
text-decoration-thickness: 2px;
}
.kova-soft__link:hover {
color: var(--accent-strong);
text-decoration-color: var(--accent-strong);
}
.kova-soft__arrow {
color: var(--accent-strong);
display: inline-block;
transition: transform var(--duration);
}
.kova-soft__link:hover .kova-soft__arrow { transform: translateX(4px); }
[data-kova-sticky] {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 90;
padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
background: var(--brand);
color: var(--ink-inverse);
transform: translateY(0);
transition: transform var(--duration) var(--ease-out);
box-shadow: var(--shadow-lg);
}
[data-kova-sticky].is-hidden {
transform: translateY(100%);
}
@media (min-width: 52em) {
[data-kova-sticky] { display: none; }
}
/* ==========================================================================
ADSENSE PLACEHOLDER
========================================================================== */
.adsense {
margin: 2.5rem 0;
max-width: var(--w-reading);
}
.adsense--placeholder {
padding: 2rem 1rem;
background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 8px, var(--surface-3) 8px, var(--surface-3) 16px);
border-radius: var(--radius-md);
text-align: center;
color: var(--ink-muted);
font-size: 0.85rem;
}
/* ==========================================================================
DISCLAIMER YMYL
========================================================================== */
.disclaimer-ymyl {
margin: 2.5rem 0 1rem;
padding: 1rem 1.2rem;
background: var(--surface-2);
border-left: 3px solid var(--warning);
border-radius: var(--radius-md);
font-size: 0.88rem;
line-height: 1.55;
color: var(--ink-soft);
}
.disclaimer-ymyl p { margin: 0; }
.disclaimer-ymyl strong { color: var(--ink); }
/* Footnote variant — disclaimer al final de pilares/posts, integrado en la
transición main → footer mediante un degradado neutro. Cero huecos blancos
y sin línea separadora estridente. */
.disclaimer-ymyl--footnote {
background: linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 100%);
border: 0;
border-radius: 0;
margin: 3rem 0 0;
padding: 2rem 0 2.5rem;
font-size: 0.82rem;
color: var(--ink-muted);
max-width: none;
line-height: 1.55;
}
.disclaimer-ymyl--footnote .container {
max-width: var(--w-reading);
}
.disclaimer-ymyl--footnote p { margin: 0; }
.disclaimer-ymyl--footnote strong {
color: var(--ink-soft);
font-weight: 600;
}
/* Neutraliza el margin-top del site-footer cuando el último bloque del body es
un disclaimer footnote — evita el doble gap visible. */
body:has(.disclaimer-ymyl--footnote) .site-footer {
margin-top: 0;
}
/* ==========================================================================
TABLES — estilo general para tablas dentro del cuerpo de contenido
========================================================================== */
.pilar__contenido table,
.post__cuerpo table,
.ranking__cuerpo table,
.legal__cuerpo table {
display: table;
width: 100%;
max-width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 1.8em 0;
font-size: 0.94rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xs);
table-layout: auto;
box-sizing: border-box;
}
.pilar__contenido thead,
.post__cuerpo thead,
.ranking__cuerpo thead,
.legal__cuerpo thead {
background: linear-gradient(135deg, var(--surface-2) 0%, var(--tint-cool) 100%);
}
.pilar__contenido th,
.post__cuerpo th,
.ranking__cuerpo th,
.legal__cuerpo th {
font-weight: 700;
text-align: left;
padding: 0.95rem 1.1rem;
color: var(--ink);
font-size: 0.88rem;
letter-spacing: -0.012em;
border-bottom: 2px solid var(--rule);
vertical-align: top;
}
.pilar__contenido td,
.post__cuerpo td,
.ranking__cuerpo td,
.legal__cuerpo td {
padding: 0.85rem 1.1rem;
border-bottom: 1px solid var(--rule);
vertical-align: top;
font-size: 0.93rem;
line-height: 1.55;
color: var(--ink-soft);
}
.pilar__contenido td:first-child,
.post__cuerpo td:first-child,
.ranking__cuerpo td:first-child,
.legal__cuerpo td:first-child {
font-weight: 600;
color: var(--ink);
}
.pilar__contenido tbody tr:nth-child(even) td,
.post__cuerpo tbody tr:nth-child(even) td,
.ranking__cuerpo tbody tr:nth-child(even) td,
.legal__cuerpo tbody tr:nth-child(even) td {
background: var(--surface-1);
}
.pilar__contenido tbody tr:last-child td,
.post__cuerpo tbody tr:last-child td,
.ranking__cuerpo tbody tr:last-child td,
.legal__cuerpo tbody tr:last-child td {
border-bottom: 0;
}
.pilar__contenido tbody tr:hover td,
.post__cuerpo tbody tr:hover td,
.ranking__cuerpo tbody tr:hover td,
.legal__cuerpo tbody tr:hover td {
background: var(--tint-lime);
color: var(--ink);
}
.pilar__contenido tbody tr:hover td:first-child,
.post__cuerpo tbody tr:hover td:first-child,
.ranking__cuerpo tbody tr:hover td:first-child,
.legal__cuerpo tbody tr:hover td:first-child {
color: var(--brand);
}
/* Scroll horizontal en mobile sin perder estilo */
@media (max-width: 47.99em) {
.pilar__contenido table,
.post__cuerpo table,
.ranking__cuerpo table,
.legal__cuerpo table {
display: block;
overflow-x: auto;
max-width: 100%;
-webkit-overflow-scrolling: touch;
}
}
/* ==========================================================================
BRAND COLORS BY data-brand-idx (rotación cíclica)
========================================================================== */
[data-brand-idx="0"] { --brand-color: var(--brand-c0); }
[data-brand-idx="1"] { --brand-color: var(--brand-c1); }
[data-brand-idx="2"] { --brand-color: var(--brand-c2); }
[data-brand-idx="3"] { --brand-color: var(--brand-c3); }
[data-brand-idx="4"] { --brand-color: var(--brand-c4); }
[data-brand-idx="5"] { --brand-color: var(--brand-c5); }
[data-brand-idx="6"] { --brand-color: var(--brand-c6); }
[data-brand-idx="7"] { --brand-color: var(--brand-c7); }
[data-brand-idx="8"] { --brand-color: var(--brand-c8); }
[data-brand-idx="9"] { --brand-color: var(--brand-c9); }
/* ==========================================================================
PRESTAMISTAS — HUB
========================================================================== */
.prestamistas-hub {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.2rem 4rem;
}
@media (min-width: 48em) {
.prestamistas-hub { padding: 0 2rem 5rem; }
}
.prestamistas-hub__header {
margin: 1rem 0 2rem;
max-width: var(--w-reading);
}
.prestamistas-hub__kicker {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.7rem;
}
.prestamistas-hub__titulo {
margin: 0 0 0.7rem;
font-size: clamp(2rem, 3.4vw + 1rem, 3rem);
font-weight: 700;
letter-spacing: -0.028em;
}
.prestamistas-hub__resumen {
font-size: 1.1rem;
line-height: 1.5;
margin: 0;
color: var(--ink-soft);
max-width: 56ch;
}
.prestamistas-hub__intro {
max-width: var(--w-reading);
margin: 0 0 3rem;
color: var(--ink-soft);
line-height: 1.6;
}
.prestamistas-hub__grupo {
margin: 2.5rem 0;
}
.prestamistas-hub__grupo-titulo {
font-size: 1.3rem;
font-weight: 600;
margin: 0 0 1.2rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--rule);
}
.prestamistas-hub__lista {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.8rem;
grid-template-columns: 1fr;
}
@media (min-width: 48em) {
.prestamistas-hub__lista { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 68em) {
.prestamistas-hub__lista { grid-template-columns: repeat(3, 1fr); }
}
.prestamistas-hub__item { margin: 0; }
.prestamistas-hub__enlace {
display: block;
padding: 1.2rem 1.4rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
text-decoration: none;
color: var(--ink);
transition: transform var(--duration), border-color var(--duration), box-shadow var(--duration);
}
.prestamistas-hub__enlace:hover {
transform: translateY(-2px);
border-color: var(--ink);
box-shadow: var(--shadow-md);
color: var(--ink);
}
.prestamistas-hub__nombre {
display: block;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.3rem;
letter-spacing: -0.018em;
}
.prestamistas-hub__claim {
display: block;
font-size: 0.88rem;
color: var(--ink-soft);
line-height: 1.4;
}
.prestamistas-hub__claim--pendiente {
color: var(--ink-muted);
font-style: italic;
}
/* ==========================================================================
PRESTAMISTAS — BRAND MARK (logo placeholder)
========================================================================== */
.prestamista__brand-mark,
.ranking__item-brand,
.cta-prestamista__brand-mark {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--brand-color, var(--brand));
color: var(--ink-inverse);
font-family: var(--font-display);
font-weight: 700;
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.prestamista__brand-mark img,
.ranking__item-brand img,
.cta-prestamista__brand-mark img {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
object-fit: contain;
padding: 10%;
box-sizing: border-box;
}
/* Cuando hay logo real (img), neutralizar el fondo de marca y la luz radial. */
.prestamista__brand-mark:has(img),
.ranking__item-brand:has(img),
.cta-prestamista__brand-mark:has(img) {
background: var(--ink-inverse);
border: 1px solid var(--rule);
}
.prestamista__brand-mark:has(img)::after,
.ranking__item-brand:has(img)::after,
.cta-prestamista__brand-mark:has(img)::after {
display: none;
}
.prestamista__brand-mark::after,
.ranking__item-brand::after,
.cta-prestamista__brand-mark::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 25%, oklch(0.99 0.002 250 / 0.18) 0%, transparent 60%);
pointer-events: none;
}
/* Aspect ratio 3:2 para todos los contenedores de marca — encaja con logos horizontales */
.prestamista__brand-mark {
width: 168px;
height: 112px;
font-size: 3rem;
letter-spacing: -0.04em;
}
.ranking__item-brand {
width: 120px;
height: 80px;
font-size: 2rem;
letter-spacing: -0.04em;
}
@media (min-width: 56em) {
.ranking__item-brand { width: 140px; height: 92px; }
}
.cta-prestamista__brand-mark {
width: 84px;
height: 56px;
font-size: 1.4rem;
letter-spacing: -0.04em;
}
/* En cards de productos afines y alternativas, logo más prominente */
.cta-prestamista--card .cta-prestamista__brand-mark {
width: 120px;
height: 80px;
font-size: 1.8rem;
}
/* Hub de prestamistas: logo en cabecera de cada card */
.prestamistas-hub__logo {
display: flex;
align-items: center;
justify-content: flex-start;
height: 72px;
margin-bottom: 0.9rem;
}
.prestamistas-hub__logo img {
max-width: 170px;
max-height: 64px;
width: auto;
height: auto;
object-fit: contain;
}
.prestamistas-hub__logo-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: var(--radius-md);
background: var(--ink);
color: var(--ink-inverse);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.4rem;
letter-spacing: -0.04em;
}
/* Simulador minicrédito: variante con logo real, aspect 3:2 */
.widget__opcion-brand--logo {
background: var(--ink-inverse) !important;
border: 1px solid var(--rule);
padding: 8px;
width: 96px !important;
height: 64px !important;
}
.widget__opcion-brand--logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* ==========================================================================
GRÁFICA: RANGOS DEL PRODUCTO (ficha de prestamista)
========================================================================== */
.rangos {
padding: 1.6rem 1.8rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
}
.rangos__titulo {
font-size: 1.15rem;
font-weight: 650;
margin: 0 0 0.4rem;
letter-spacing: -0.022em;
}
.rangos__sub {
margin: 0 0 1.4rem;
color: var(--ink-soft);
font-size: 0.92rem;
}
.rangos__barra { margin: 0 0 1.2rem; }
.rangos__cabecera {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
margin-bottom: 0.35rem;
}
.rangos__etiqueta {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-muted);
}
.rangos__valor {
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.018em;
color: var(--ink);
}
.rangos__svg {
width: 100%;
height: 14px;
display: block;
}
.rangos__pie {
display: flex;
justify-content: space-between;
font-size: 0.72rem;
color: var(--ink-muted);
margin-top: 0.3rem;
font-variant-numeric: tabular-nums;
}
.rangos__nota {
margin: 0.8rem 0 0;
font-size: 0.78rem;
color: var(--ink-muted);
line-height: 1.5;
}
/* Grid de las 4 gráficas en la ficha */
.prestamista__rangos-intro {
margin: 0 0 1.6rem;
color: var(--ink-soft);
max-width: var(--w-reading);
}
.graficas-grid {
display: grid;
gap: 1.2rem;
grid-template-columns: 1fr;
}
@media (min-width: 56em) {
.graficas-grid { grid-template-columns: 1fr 1fr; }
}
.graficas-grid__item { min-width: 0; }
.graficas-grid__item > * { height: 100%; }
/* ==========================================================================
GRÁFICA 2: PERFIL DE ACEPTACIÓN
========================================================================== */
.aceptacion {
padding: 1.6rem 1.8rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
height: 100%;
display: flex;
flex-direction: column;
}
.aceptacion__titulo {
font-size: 1.15rem;
font-weight: 650;
margin: 0 0 0.4rem;
letter-spacing: -0.022em;
}
.aceptacion__sub {
margin: 0 0 1.2rem;
color: var(--ink-soft);
font-size: 0.92rem;
}
.aceptacion__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 0.7rem;
}
.aceptacion__chip {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.85rem 1rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
min-width: 0;
min-height: 48px;
}
.aceptacion__icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.aceptacion__icon svg { width: 16px; height: 16px; }
.aceptacion__chip--si .aceptacion__icon { background: var(--success-soft); color: var(--success); }
.aceptacion__chip--parcial .aceptacion__icon { background: var(--warning-soft); color: oklch(0.50 0.16 75); }
.aceptacion__chip--no .aceptacion__icon { background: oklch(0.94 0.018 30); color: oklch(0.55 0.18 25); }
.aceptacion__chip--si { border-color: oklch(0.85 0.10 145 / 0.5); }
.aceptacion__chip--no { color: var(--ink-muted); opacity: 0.7; }
.aceptacion__label {
font-weight: 600;
font-size: 0.95rem;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.aceptacion__chip--no .aceptacion__label { color: var(--ink-muted); }
.aceptacion__leyenda {
list-style: none;
margin: 1rem 0 0;
padding: 1rem 0 0;
border-top: 1px solid var(--rule);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.1rem 1.4rem;
font-size: 0.88rem;
color: var(--ink-soft);
}
.aceptacion__leyenda-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
}
.aceptacion__leyenda-item--si { color: var(--success); }
.aceptacion__leyenda-item--si .aceptacion__icon { background: var(--success-soft); color: var(--success); }
.aceptacion__leyenda-item--parcial { color: oklch(0.50 0.16 75); }
.aceptacion__leyenda-item--parcial .aceptacion__icon { background: var(--warning-soft); color: oklch(0.50 0.16 75); }
.aceptacion__leyenda-item--no { color: oklch(0.55 0.18 25); }
.aceptacion__leyenda-item--no .aceptacion__icon { background: oklch(0.94 0.018 30); color: oklch(0.55 0.18 25); }
/* ==========================================================================
GRÁFICA 3: TIMELINE DE VELOCIDAD
========================================================================== */
.velocidad {
padding: 1.6rem 1.8rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
}
.velocidad__titulo {
font-size: 1.15rem;
font-weight: 650;
margin: 0 0 0.4rem;
letter-spacing: -0.022em;
}
.velocidad__sub {
margin: 0 0 1.4rem;
color: var(--ink-soft);
font-size: 0.92rem;
}
.velocidad__timeline {
margin-bottom: 1rem;
}
.velocidad__svg {
width: 100%;
height: 70px;
display: block;
}
.velocidad__escala {
list-style: none;
margin: 0.4rem 0 0;
padding: 0;
display: flex;
justify-content: space-between;
font-size: 0.72rem;
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
}
.velocidad__escala li { padding: 0; margin: 0; flex: 1; text-align: center; }
.velocidad__escala li:first-child { text-align: left; }
.velocidad__escala li:last-child { text-align: right; }
.velocidad__leyenda {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 0.86rem;
}
.velocidad__pin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-weight: 700;
font-size: 0.74rem;
margin-right: 0.5rem;
vertical-align: middle;
}
.velocidad__pin--aprob { background: oklch(0.16 0.012 250); color: white; }
.velocidad__pin--ingr { background: oklch(0.88 0.21 125); color: oklch(0.16 0.012 250); }
/* ==========================================================================
GRÁFICA 4: TAE VS MEDIA DEL SEGMENTO
========================================================================== */
.taeseg {
padding: 1.6rem 1.8rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
}
.taeseg--baja { border-left: 3px solid var(--success); }
.taeseg--alta { border-left: 3px solid oklch(0.65 0.21 25); }
.taeseg--media { border-left: 3px solid var(--ink-faint); }
.taeseg__titulo {
font-size: 1.15rem;
font-weight: 650;
margin: 0 0 0.4rem;
letter-spacing: -0.022em;
}
.taeseg__sub {
margin: 0 0 1.4rem;
color: var(--ink-soft);
font-size: 0.92rem;
}
.taeseg__barra-wrap { margin-bottom: 0.9rem; }
.taeseg__svg {
width: 100%;
height: 80px;
display: block;
overflow: visible;
}
.taeseg__escala {
display: flex;
justify-content: space-between;
font-size: 0.72rem;
color: var(--ink-muted);
margin-top: 0.3rem;
font-variant-numeric: tabular-nums;
}
.taeseg__nota {
margin: 0;
font-size: 0.78rem;
color: var(--ink-muted);
line-height: 1.5;
}
/* ==========================================================================
PRESTAMISTAS — FICHA
========================================================================== */
.prestamista {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.2rem 4rem;
}
@media (min-width: 48em) {
.prestamista { padding: 0 2rem 5rem; }
}
.prestamista__header {
margin: 1rem 0 2rem;
}
.prestamista__header-top {
display: flex;
gap: 1.5rem;
align-items: flex-start;
flex-direction: column;
}
@media (min-width: 48em) {
.prestamista__header-top {
flex-direction: row;
align-items: center;
}
}
.prestamista__header-text {
max-width: var(--w-reading);
flex: 1;
}
.prestamista__kicker {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.7rem;
}
.prestamista__titulo {
margin: 0 0 0.7rem;
font-size: clamp(1.8rem, 2.8vw + 1rem, 2.6rem);
font-weight: 700;
letter-spacing: -0.028em;
line-height: 1.05;
}
.prestamista__claim {
font-size: 1.1rem;
color: var(--ink-soft);
line-height: 1.5;
margin: 0 0 1rem;
max-width: 56ch;
}
.prestamista__meta {
font-size: 0.85rem;
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
margin: 0;
}
.prestamista__hero {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
margin-bottom: 2.5rem;
padding: 1.8rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-xl);
}
@media (min-width: 52em) {
.prestamista__hero {
grid-template-columns: 1.2fr 1fr;
align-items: center;
padding: 2.5rem;
}
}
.prestamista__hero-datos {
display: grid;
gap: 1.2rem 1.5rem;
grid-template-columns: repeat(3, 1fr);
}
.prestamista__dato {
position: relative;
}
/* El cuarto dato (Ingreso) ocupa toda la fila — suele tener texto largo */
.prestamista__dato:nth-child(4) {
grid-column: 1 / -1;
}
.prestamista__dato-label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.3rem;
}
.prestamista__dato-valor {
font-size: 1.15rem;
font-weight: 700;
color: var(--ink);
margin: 0;
line-height: 1.25;
font-variant-numeric: tabular-nums;
letter-spacing: -0.018em;
}
.prestamista__seccion {
margin: 3rem 0;
max-width: var(--container);
}
/* Modificador para secciones de texto largo — más estrecho para legibilidad */
.prestamista__seccion--lectura {
max-width: var(--w-reading);
}
.prestamista__seccion h2 {
font-size: clamp(1.3rem, 1.2vw + 1rem, 1.6rem);
font-weight: 650;
margin: 0 0 1rem;
letter-spacing: -0.022em;
}
.prestamista__ejemplo {
padding: 1.4rem 1.6rem;
background: var(--accent-soft);
border-left: 3px solid var(--accent);
border-radius: var(--radius-md);
}
.prestamista__nota-legal {
font-size: 0.82rem;
color: var(--ink-muted);
margin-top: 0.8rem;
}
/* Decisión "para quién encaja" → 2 cols asimétrico en desktop (sí + no) */
.prestamista__decision {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 56em) {
.prestamista__decision { grid-template-columns: 1fr 1fr; }
.prestamista__decision > h2 { grid-column: 1 / -1; margin-bottom: 0; }
}
.prestamista__decision-bloque {
margin: 1rem 0;
padding: 1.2rem 1.4rem;
border-radius: var(--radius-lg);
border: 1px solid var(--rule);
}
.prestamista__decision-bloque--si {
background: var(--success-soft);
border-color: oklch(0.78 0.10 155);
}
.prestamista__decision-bloque--no {
background: var(--danger-soft);
border-color: oklch(0.80 0.10 30);
}
.prestamista__decision-bloque h3 {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 0.5rem;
}
.prestamista__decision-bloque--si h3 { color: var(--success); }
.prestamista__decision-bloque--no h3 { color: var(--danger); }
.prestamista__decision-bloque p { margin: 0; }
.prestamista__decision-bloque p + p { margin-top: 0.6rem; }
.prestamista__procontra-grid {
display: grid;
gap: 1.2rem;
grid-template-columns: 1fr;
}
@media (min-width: 46em) {
.prestamista__procontra-grid { grid-template-columns: 1fr 1fr; }
}
.prestamista__procontra-bloque {
padding: 1.2rem 1.4rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
}
.prestamista__procontra-bloque h3 {
margin-top: 0;
font-size: 0.92rem;
font-weight: 600;
}
.prestamista__procontra-bloque--pros h3 { color: var(--success); }
.prestamista__procontra-bloque--contras h3 { color: var(--danger); }
.prestamista__procontra-bloque ul {
padding-left: 1.1rem;
margin: 0;
}
.prestamista__procontra-bloque li {
font-size: 0.95rem;
line-height: 1.5;
}
/* Requisitos — grid responsive de cards en lugar de dl plano */
.prestamista__requisitos h2 { margin-bottom: 1rem; }
.prestamista__dl {
display: grid;
grid-template-columns: minmax(8rem, 12rem) 1fr;
gap: 0.7rem 1.5rem;
margin: 0;
padding: 1.2rem 1.4rem;
background: var(--surface-1);
border-radius: var(--radius-lg);
}
.prestamista__dl dt {
font-weight: 600;
color: var(--ink-muted);
font-size: 0.92rem;
}
.prestamista__dl dd { margin: 0; font-size: 0.95rem; }
/* Bento layout asimétrico: letra pequeña (8 cols) + confianza (4 cols) */
.prestamista__bento {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 64em) {
.prestamista__bento--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}
.prestamista__bento-item { min-width: 0; }
.prestamista__letra-pequena {
padding: 1.6rem 1.8rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
}
.prestamista__letra-pequena h2 { margin-top: 0; }
.prestamista__letra-cuerpo p { margin: 0 0 0.8rem; }
.prestamista__letra-cuerpo p:last-child { margin-bottom: 0; }
.prestamista__confianza {
padding: 1.6rem 1.8rem;
background: var(--ink);
color: var(--ink-inverse);
border-radius: var(--radius-lg);
}
.prestamista__confianza h2 {
margin-top: 0;
color: var(--ink-inverse);
}
.prestamista__confianza a {
color: var(--accent);
text-decoration: underline;
}
.prestamista__confianza a:hover { color: var(--ink-inverse); }
.prestamista__confianza-lista {
list-style: none;
padding: 0;
margin: 0;
}
.prestamista__confianza-lista li {
padding: 0.8rem 0;
border-bottom: 1px solid oklch(1 0 0 / 0.10);
font-size: 0.92rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.prestamista__confianza-lista li:last-child { border-bottom: 0; }
.prestamista__confianza-lista strong {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: oklch(1 0 0 / 0.55);
font-weight: 600;
}
.prestamista__confianza-lista span {
color: var(--ink-inverse);
font-weight: 500;
}
/* FAQ — en pantallas grandes pasa a 2 columnas para no quedar un muro */
.prestamista__faq-lista {
display: grid;
grid-template-columns: 1fr;
gap: 0 2.5rem;
margin: 0;
}
@media (min-width: 64em) {
.prestamista__faq-lista { grid-template-columns: 1fr 1fr; }
.prestamista__faq-lista dt:first-of-type,
.prestamista__faq-lista dt:nth-of-type(2) { margin-top: 0; }
}
.prestamista__faq-lista dt {
font-size: 1.02rem;
font-weight: 600;
margin: 1.4rem 0 0.3rem;
letter-spacing: -0.018em;
}
.prestamista__faq-lista dt:first-of-type { margin-top: 0; }
.prestamista__faq-lista dd {
margin: 0 0 1rem;
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.6;
}
.prestamista__alternativas .prestamistas-afines__grid { margin: 0; }
/* ==========================================================================
PRESTAMISTAS — RANKING
========================================================================== */
.ranking {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.2rem 4rem;
}
@media (min-width: 48em) {
.ranking { padding: 0 2rem 5rem; }
}
.ranking__header,
.ranking__criterios,
.ranking__cuerpo {
max-width: var(--w-reading);
}
.ranking__header { margin: 1rem 0 2rem; }
.ranking__kicker {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.7rem;
}
.ranking__titulo {
margin: 0 0 0.7rem;
font-size: clamp(2rem, 3.4vw + 1rem, 3rem);
font-weight: 700;
letter-spacing: -0.028em;
line-height: 1.05;
}
.ranking__resumen {
font-size: 1.1rem;
line-height: 1.5;
margin: 0 0 1rem;
color: var(--ink-soft);
max-width: 56ch;
}
.ranking__meta {
font-size: 0.85rem;
color: var(--ink-muted);
margin: 0;
font-variant-numeric: tabular-nums;
}
.ranking__criterios {
margin: 2.5rem 0;
padding: 1.4rem 1.6rem;
background: var(--surface-1);
border-left: 3px solid var(--brand);
border-radius: var(--radius-md);
}
.ranking__criterios h2 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.6rem;
}
.ranking__criterios p {
font-size: 0.95rem;
color: var(--ink-soft);
margin: 0 0 0.8rem;
}
.ranking__criterios ul {
margin: 0;
padding-left: 1.2rem;
}
.ranking__criterios li {
font-size: 0.9rem;
color: var(--ink-soft);
margin-top: 0.4rem;
line-height: 1.5;
}
.ranking__lista {
margin: 3rem 0;
max-width: var(--container);
}
.ranking__items {
list-style: none;
padding: 0;
margin: 0;
counter-reset: rank;
display: grid;
gap: 1.2rem;
}
.ranking__item {
display: grid;
grid-template-columns: auto 120px 1fr;
grid-template-rows: auto auto;
gap: 0.8rem 1.2rem;
align-items: start;
padding: 1.5rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
transition: border-color var(--duration), transform var(--duration), box-shadow var(--duration);
margin: 0;
position: relative;
}
.ranking__item:hover {
border-color: var(--ink);
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}
/* Primer puesto destacado: badge "Recomendado" + borde y fondo distintos */
.ranking__item:first-child {
border-color: var(--brand);
border-width: 1.5px;
background: linear-gradient(180deg, var(--bg) 0%, var(--accent-soft) 100%);
box-shadow: 0 4px 16px oklch(0.16 0.012 250 / 0.08);
}
.ranking__item:first-child::before {
content: "Recomendado";
position: absolute;
top: -10px;
left: 1.5rem;
background: var(--brand);
color: var(--ink-inverse);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
border-radius: var(--radius-full);
z-index: 2;
}
.ranking__item:first-child .ranking__item-num {
color: var(--brand);
}
@media (min-width: 56em) {
.ranking__item {
grid-template-columns: auto 140px 1fr auto;
grid-template-rows: auto;
align-items: center;
gap: 1.5rem;
padding: 1.8rem;
}
}
.ranking__item-num {
font-family: var(--font-mono);
font-size: 1.4rem;
font-weight: 500;
color: var(--ink-faint);
line-height: 1;
font-variant-numeric: tabular-nums;
align-self: start;
padding-top: 0.4rem;
min-width: 1.8rem;
}
@media (min-width: 56em) {
.ranking__item-num {
font-size: 1.6rem;
align-self: center;
padding-top: 0;
}
}
.ranking__item-cuerpo {
grid-column: 3 / -1;
min-width: 0;
}
@media (min-width: 56em) {
.ranking__item-cuerpo { grid-column: 3 / 4; }
}
.ranking__item-titulo {
font-size: 1.15rem;
font-weight: 600;
margin: 0 0 0.3rem;
letter-spacing: -0.018em;
}
.ranking__item-claim {
color: var(--ink-soft);
margin: 0 0 0.7rem;
font-size: 0.94rem;
line-height: 1.5;
}
.ranking__item-meta {
list-style: none;
padding: 0;
margin: 0 0 0.7rem;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
font-size: 0.78rem;
}
.ranking__item-meta li {
padding: 0.25rem 0.65rem;
background: var(--surface-2);
color: var(--ink-soft);
border-radius: var(--radius-full);
margin: 0;
font-weight: 500;
}
.ranking__item-link {
margin: 0;
font-size: 0.88rem;
}
.ranking__item-analisis {
color: var(--ink-muted);
text-decoration: none;
transition: color var(--duration-fast);
}
.ranking__item-analisis:hover {
color: var(--brand);
}
.ranking__item-cta {
grid-column: 1 / -1;
margin-top: 0.5rem;
}
@media (min-width: 56em) {
.ranking__item-cta {
grid-column: 4 / 5;
margin-top: 0;
text-align: right;
}
}
.ranking__cuerpo {
margin-top: 3rem;
font-size: 1.02rem;
line-height: 1.7;
}
.ranking__cuerpo h2 {
font-size: 1.4rem;
font-weight: 650;
margin-top: 2.5em;
letter-spacing: -0.022em;
}
.ranking__cuerpo h3 {
font-size: 1.1rem;
font-weight: 600;
margin-top: 2em;
}
.ranking__cuerpo table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
}
.ranking__cuerpo th,
.ranking__cuerpo td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid var(--rule);
vertical-align: top;
font-size: 0.95rem;
}
.ranking__cuerpo thead th {
background: var(--surface-2);
font-weight: 600;
}
/* ==========================================================================
PRESTAMISTAS — COMPARATIVA
========================================================================== */
.comparativa {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.2rem 4rem;
}
@media (min-width: 48em) {
.comparativa { padding: 0 2rem 5rem; }
}
.comparativa__header,
.comparativa__cuerpo { max-width: var(--w-reading); }
.comparativa__header { margin: 1rem 0 2rem; }
.comparativa__kicker {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.7rem;
}
.comparativa__titulo {
margin: 0 0 0.7rem;
font-size: clamp(1.8rem, 2.8vw + 1rem, 2.6rem);
font-weight: 700;
letter-spacing: -0.028em;
}
.comparativa__resumen {
font-size: 1.1rem;
color: var(--ink-soft);
margin: 0 0 1rem;
max-width: 56ch;
line-height: 1.5;
}
.comparativa__tabla-wrap {
margin: 2rem 0;
overflow-x: auto;
background: var(--surface-1);
border-radius: var(--radius-lg);
border: 1px solid var(--rule);
}
.comparativa__tabla {
width: 100%;
border-collapse: collapse;
}
.comparativa__tabla th,
.comparativa__tabla td {
padding: 0.9rem 1.1rem;
text-align: left;
border-bottom: 1px solid var(--rule);
vertical-align: top;
font-size: 0.95rem;
}
.comparativa__tabla thead th {
background: var(--surface-2);
font-weight: 600;
font-size: 1rem;
border-bottom: 2px solid var(--rule-strong);
}
.comparativa__tabla tbody th {
font-weight: 600;
color: var(--ink-muted);
background: var(--surface-2);
font-size: 0.88rem;
}
.comparativa__ctas {
display: grid;
gap: 1.2rem;
grid-template-columns: 1fr;
margin: 3rem 0;
}
@media (min-width: 52em) {
.comparativa__ctas { grid-template-columns: 1fr 1fr; }
}
/* ==========================================================================
PRESTAMISTAS — CTA prestamista (3 variantes)
========================================================================== */
.cta-prestamista--box {
display: grid;
gap: 1.4rem;
grid-template-columns: 1fr;
align-items: center;
padding: 1.6rem 1.8rem;
margin: 2rem 0;
background: var(--surface-1);
border: 1px solid var(--rule);
border-left: 3px solid var(--brand);
border-radius: var(--radius-lg);
}
@media (min-width: 42em) {
.cta-prestamista--box {
grid-template-columns: 1fr auto;
padding: 1.8rem 2rem;
gap: 2rem;
}
}
.cta-prestamista__kicker {
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.3rem;
}
.cta-prestamista__titulo {
margin: 0 0 0.4rem;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.022em;
}
.cta-prestamista__claim {
margin: 0;
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.5;
}
.cta-prestamista__action {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
}
@media (min-width: 42em) {
.cta-prestamista__action {
align-items: flex-end;
text-align: right;
}
}
.cta-prestamista__enlace {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.95rem 1.5rem;
background: var(--accent);
color: var(--accent-ink);
font-weight: 700;
font-size: 0.98rem;
text-decoration: none;
border-radius: var(--radius-md);
transition: background var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
white-space: nowrap;
min-height: 44px;
box-shadow: 0 1px 0 oklch(0.16 0.012 250 / 0.08), 0 2px 6px oklch(0.88 0.21 125 / 0.20);
}
.cta-prestamista__enlace::after {
content: "→";
transition: transform var(--duration) var(--ease-out);
}
.cta-prestamista__enlace:hover,
.cta-prestamista__enlace:focus-visible {
background: var(--accent-strong);
color: var(--accent-ink);
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 12px oklch(0.88 0.21 125 / 0.35), 0 2px 4px oklch(0.16 0.012 250 / 0.08);
}
.cta-prestamista__enlace:hover::after,
.cta-prestamista__enlace:focus-visible::after {
transform: translateX(4px);
}
.cta-prestamista__nota {
font-size: 0.76rem;
color: var(--ink-muted);
margin: 0;
max-width: 32ch;
line-height: 1.4;
}
.cta-prestamista__nota a { color: var(--ink-muted); }
/* Variante card */
.cta-prestamista--card {
display: flex;
flex-direction: column;
gap: 0.8rem;
padding: 1.3rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
transition: border-color var(--duration), box-shadow var(--duration), transform var(--duration);
}
.cta-prestamista--card:hover {
border-color: var(--ink);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.cta-prestamista--card .cta-prestamista__header {
display: flex;
gap: 0.9rem;
align-items: center;
}
.cta-prestamista__nombre {
font-size: 1.05rem;
font-weight: 600;
margin: 0 0 0.15rem;
letter-spacing: -0.018em;
}
.cta-prestamista--card .cta-prestamista__kicker {
margin: 0;
font-size: 0.72rem;
}
.cta-prestamista--card .cta-prestamista__enlace {
align-self: flex-start;
font-size: 0.88rem;
padding: 0.65rem 1.1rem;
margin-top: 0.3rem;
min-height: 40px;
}
.cta-prestamista--card .cta-prestamista__nota {
font-size: 0.72rem;
margin-top: 0.2rem;
max-width: none;
}
/* Variante inline */
.cta-prestamista--inline {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.7rem 1.1rem;
background: var(--accent);
color: var(--accent-ink);
font-weight: 700;
font-size: 0.88rem;
text-decoration: none;
border-radius: var(--radius-md);
white-space: nowrap;
transition: background var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
min-height: 40px;
box-shadow: 0 1px 4px oklch(0.88 0.21 125 / 0.20);
}
.cta-prestamista--inline:hover,
.cta-prestamista--inline:focus-visible {
background: var(--accent-strong);
color: var(--accent-ink);
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 4px 10px oklch(0.88 0.21 125 / 0.30);
}
/* ==========================================================================
PRESTAMISTAS AFINES (caja en posts)
========================================================================== */
.prestamistas-afines {
margin: 3rem auto;
padding: 1.8rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-xl);
max-width: var(--container);
}
.prestamistas-afines__header {
margin-bottom: 1.2rem;
}
.prestamistas-afines__kicker {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-ink);
background: var(--accent);
padding: 0.25rem 0.6rem;
border-radius: var(--radius-full);
margin: 0 0 0.7rem;
}
.prestamistas-afines__titulo {
font-size: 1.3rem;
font-weight: 650;
margin: 0 0 0.4rem;
letter-spacing: -0.022em;
}
.prestamistas-afines__intro {
margin: 0;
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.5;
}
.prestamistas-afines__grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
margin: 1.5rem 0;
}
@media (min-width: 46em) {
.prestamistas-afines__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 68em) {
.prestamistas-afines__grid { grid-template-columns: repeat(3, 1fr); }
}
.prestamistas-afines__disclosure {
font-size: 0.76rem;
color: var(--ink-muted);
margin: 0;
padding-top: 1.2rem;
border-top: 1px solid var(--rule);
line-height: 1.5;
}
.prestamistas-afines__disclosure a { color: var(--ink-muted); }
/* ==========================================================================
ACCENT SECTIONS (data-cat color override no usado — sistema unificado)
========================================================================== */
[data-cat="prestamistas"],
[data-cat="herramientas"],
[data-cat="hipotecas"],
[data-cat="deudas"],
[data-cat="legal"],
[data-cat="finanzas"],
[data-cat="prestamos"] {
/* todas las secciones usan el sistema unificado brand+accent */
}
/* ==========================================================================
UTILS
========================================================================== */
.u-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
MOBILE TWEAKS
========================================================================== */
@media (max-width: 47.99em) {
.pilar__contenido { padding: 0 1.2rem; }
.pilar__contenido > * { max-width: 100%; }
table { display: block; overflow-x: auto; max-width: 100%; }
.comparativa__tabla { display: table; }
}
/* ==========================================================================
ANIMATIONS — entrada sutil + stagger + hover effects
========================================================================== */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes pulseAccent {
0%, 100% { box-shadow: 0 0 0 0 oklch(0.88 0.21 125 / 0.50); }
50% { box-shadow: 0 0 0 8px oklch(0.88 0.21 125 / 0); }
}
/* Stagger automático a items en grids con .anim-stagger */
.anim-stagger > * {
animation: fadeUp 0.55s var(--ease-out) both;
}
.anim-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.anim-stagger > *:nth-child(2) { animation-delay: 0.12s; }
.anim-stagger > *:nth-child(3) { animation-delay: 0.19s; }
.anim-stagger > *:nth-child(4) { animation-delay: 0.26s; }
.anim-stagger > *:nth-child(5) { animation-delay: 0.33s; }
.anim-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.anim-stagger > *:nth-child(n+7) { animation-delay: 0.47s; }
/* Aplicamos por defecto entrada a piezas clave */
.home-pilares__grid,
.home-herramientas__grid,
.home-manifesto__lista,
.prestamistas-afines__grid,
.prestamistas-hub__lista,
.spokes-grid,
.ranking__items {
/* Heredan stagger automáticamente */
}
.home-pilares__grid > *,
.home-herramientas__grid > *,
.home-manifesto__lista > *,
.prestamistas-afines__grid > *,
.prestamistas-hub__lista > *,
.spokes-grid > *,
.ranking__items > * {
animation: fadeUp 0.55s var(--ease-out) both;
}
.home-pilares__grid > *:nth-child(1),
.home-herramientas__grid > *:nth-child(1),
.home-manifesto__lista > *:nth-child(1),
.prestamistas-afines__grid > *:nth-child(1),
.prestamistas-hub__lista > *:nth-child(1),
.spokes-grid > *:nth-child(1),
.ranking__items > *:nth-child(1) { animation-delay: 0.05s; }
.home-pilares__grid > *:nth-child(2),
.home-herramientas__grid > *:nth-child(2),
.home-manifesto__lista > *:nth-child(2),
.prestamistas-afines__grid > *:nth-child(2),
.prestamistas-hub__lista > *:nth-child(2),
.spokes-grid > *:nth-child(2),
.ranking__items > *:nth-child(2) { animation-delay: 0.12s; }
.home-pilares__grid > *:nth-child(3),
.home-herramientas__grid > *:nth-child(3),
.home-manifesto__lista > *:nth-child(3),
.prestamistas-afines__grid > *:nth-child(3),
.prestamistas-hub__lista > *:nth-child(3),
.spokes-grid > *:nth-child(3),
.ranking__items > *:nth-child(3) { animation-delay: 0.19s; }
.home-pilares__grid > *:nth-child(4),
.prestamistas-hub__lista > *:nth-child(4),
.spokes-grid > *:nth-child(4),
.ranking__items > *:nth-child(4) { animation-delay: 0.26s; }
.home-pilares__grid > *:nth-child(5),
.prestamistas-hub__lista > *:nth-child(5),
.spokes-grid > *:nth-child(5),
.ranking__items > *:nth-child(5) { animation-delay: 0.33s; }
.ranking__items > *:nth-child(n+6) { animation-delay: 0.40s; }
.prestamistas-hub__lista > *:nth-child(n+6),
.spokes-grid > *:nth-child(n+6) { animation-delay: 0.40s; }
/* Hero animations */
.home-hero__kicker { animation: fadeUp 0.6s var(--ease-out) 0.05s both; }
.home-hero__titulo { animation: fadeUp 0.7s var(--ease-out) 0.15s both; }
.home-hero__resumen { animation: fadeUp 0.7s var(--ease-out) 0.25s both; }
.pilar__kicker { animation: fadeUp 0.6s var(--ease-out) 0.05s both; }
.pilar__titulo { animation: fadeUp 0.7s var(--ease-out) 0.15s both; }
.pilar__resumen { animation: fadeUp 0.7s var(--ease-out) 0.25s both; }
.prestamista__header-top { animation: fadeUp 0.6s var(--ease-out) 0.05s both; }
.prestamista__hero { animation: fadeUp 0.7s var(--ease-out) 0.20s both; }
/* Recommended badge pulsa muy sutil */
.ranking__item:first-child::before {
animation: pulseAccent 2.6s ease-in-out 1s 2;
}
/* Reduced motion: desactivar todo */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
animation-delay: 0s !important;
}
}
/* ==========================================================================
SECCIONES TINTADAS — variedad de fondo entre bloques
========================================================================== */
.home-herramientas {
background: var(--gradient-soft-cool);
position: relative;
}
.home-herramientas::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 90% 10%, oklch(0.88 0.21 125 / 0.06) 0%, transparent 40%),
radial-gradient(circle at 5% 90%, oklch(0.55 0.18 250 / 0.04) 0%, transparent 40%);
pointer-events: none;
}
.home-herramientas > * { position: relative; }
.home-manifesto {
background: var(--gradient-soft-mint);
padding: 4rem 0;
position: relative;
}
.home-manifesto::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, oklch(0.50 0.15 165 / 0.05) 0%, transparent 60%);
pointer-events: none;
}
.home-manifesto > * { position: relative; }
.home-manifesto__item:nth-child(1) {
background: var(--bg);
border-color: oklch(0.85 0.04 165);
}
.home-manifesto__item:nth-child(2) {
background: var(--bg);
border-color: oklch(0.85 0.04 245);
}
.home-manifesto__item:nth-child(3) {
background: var(--bg);
border-color: oklch(0.85 0.05 90);
}
.home-manifesto__item {
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.home-manifesto__item::after {
content: "";
position: absolute;
top: 0; right: 0;
width: 80px; height: 80px;
background: radial-gradient(circle at top right, var(--accent-soft) 0%, transparent 70%);
pointer-events: none;
opacity: 0.6;
}
.home-manifesto__item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.pilar__externos {
background: var(--gradient-soft-violet);
position: relative;
}
.pilar__externos::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 10% 50%, oklch(0.55 0.18 295 / 0.05) 0%, transparent 50%);
pointer-events: none;
}
.pilar__externos > * { position: relative; }
.pilar__spokes {
background: var(--gradient-soft-cool);
}
/* ==========================================================================
CARDS VARIADAS — treatment diferenciado para dar dinamismo
========================================================================== */
.pilar-card {
position: relative;
box-shadow: var(--shadow-sm);
}
.pilar-card:nth-child(3n+1)::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 70%, oklch(0.88 0.21 125 / 0.06) 100%);
pointer-events: none;
border-radius: inherit;
opacity: 0;
transition: opacity var(--duration);
}
.pilar-card:nth-child(3n+2)::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 70%, oklch(0.55 0.18 250 / 0.05) 100%);
pointer-events: none;
border-radius: inherit;
opacity: 0;
transition: opacity var(--duration);
}
.pilar-card:nth-child(3n)::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 70%, oklch(0.62 0.15 155 / 0.05) 100%);
pointer-events: none;
border-radius: inherit;
opacity: 0;
transition: opacity var(--duration);
}
.pilar-card:hover::before { opacity: 1; }
.pilar-card:hover { box-shadow: var(--shadow-lg); }
.spoke-card { box-shadow: var(--shadow-xs); }
.spoke-card:hover { box-shadow: var(--shadow-md); }
/* Hub prestamistas — cards tienen acento del brand-color del prestamista */
.prestamistas-hub__enlace {
position: relative;
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.prestamistas-hub__enlace::before {
content: "";
position: absolute;
left: 0; top: 0;
width: 4px; height: 100%;
background: var(--ink);
transition: width var(--duration) var(--ease-out);
}
.prestamistas-hub__enlace:hover {
box-shadow: var(--shadow-md);
}
.prestamistas-hub__enlace:hover::before {
width: 6px;
background: var(--accent);
}
.prestamistas-hub__grupo:nth-of-type(1) .prestamistas-hub__enlace::before { background: var(--accent-3); }
.prestamistas-hub__grupo:nth-of-type(2) .prestamistas-hub__enlace::before { background: var(--success); }
.prestamistas-hub__grupo:nth-of-type(3) .prestamistas-hub__enlace::before { background: var(--accent-2); }
.prestamistas-hub__grupo:nth-of-type(4) .prestamistas-hub__enlace::before { background: var(--warning); }
.prestamistas-hub__grupo .prestamistas-hub__enlace:hover::before { background: var(--accent); }
/* ==========================================================================
FICHA PRESTAMISTA — hero con gradiente y profundidad
========================================================================== */
.prestamista__hero {
background: var(--gradient-soft-cool);
border: 1px solid var(--rule);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md-cool);
}
.prestamista__hero::before {
content: "";
position: absolute;
top: -40%;
right: -10%;
width: 60%;
height: 200%;
background: radial-gradient(circle, var(--brand-color, oklch(0.88 0.21 125)) / 0.08 0%, transparent 60%);
pointer-events: none;
opacity: 0.5;
}
.prestamista__hero > * { position: relative; z-index: 1; }
.prestamista__dato {
padding: 1rem 1.2rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
transition: border-color var(--duration), box-shadow var(--duration);
}
.prestamista__dato:hover {
border-color: var(--rule-strong);
box-shadow: var(--shadow-sm);
}
/* Cards CTA box con halo lima al hover */
.cta-prestamista--box {
position: relative;
overflow: hidden;
transition: border-color var(--duration), box-shadow var(--duration);
}
.cta-prestamista--box::after {
content: "";
position: absolute;
top: 0; right: 0;
width: 200px;
height: 200px;
background: radial-gradient(circle at top right, oklch(0.88 0.21 125 / 0.10) 0%, transparent 70%);
pointer-events: none;
opacity: 0;
transition: opacity var(--duration);
}
.cta-prestamista--box:hover::after { opacity: 1; }
.cta-prestamista--box:hover {
border-left-color: var(--accent);
box-shadow: var(--shadow-md);
}
/* ==========================================================================
CTA PRESTAMISTA --card: alineación correcta (botón pegado al fondo)
========================================================================== */
.cta-prestamista--card {
height: 100%;
position: relative;
overflow: hidden;
}
.cta-prestamista__claim-wrap {
flex: 1;
}
.cta-prestamista--card .cta-prestamista__claim {
margin: 0;
color: var(--ink-soft);
font-size: 0.92rem;
line-height: 1.5;
}
.cta-prestamista--card .cta-prestamista__enlace {
margin-top: auto;
}
.cta-prestamista--card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 3px;
background: var(--brand-color, var(--ink));
opacity: 0.85;
}
.cta-prestamista--card:hover::before {
background: var(--accent);
opacity: 1;
}
/* ==========================================================================
RANKING — más profundidad en items
========================================================================== */
.ranking__item {
box-shadow: var(--shadow-xs);
}
.ranking__item:hover {
box-shadow: var(--shadow-md);
}
.ranking__item:first-child {
box-shadow: var(--shadow-md), 0 0 0 3px oklch(0.88 0.21 125 / 0.10);
}
.ranking__item:first-child:hover {
box-shadow: var(--shadow-lg), 0 0 0 3px oklch(0.88 0.21 125 / 0.18);
}
/* Badges meta más vivos */
.ranking__item-meta li:nth-child(1) { background: var(--accent-3-soft); color: var(--accent-3); }
.ranking__item-meta li:nth-child(2) { background: var(--success-soft); color: var(--success); }
.ranking__item-meta li:nth-child(3) { background: var(--accent-2-soft); color: var(--accent-2); }
.ranking__item-meta li:nth-child(4) { background: var(--warning-soft); color: oklch(0.50 0.16 75); }
/* ==========================================================================
PRESTAMISTAS AFINES — caja más rica
========================================================================== */
.prestamistas-afines {
background: var(--gradient-soft-warm);
border-color: oklch(0.90 0.012 75);
position: relative;
overflow: hidden;
}
.prestamistas-afines::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 280px;
height: 280px;
background: radial-gradient(circle at top right, oklch(0.88 0.21 125 / 0.12) 0%, transparent 60%);
pointer-events: none;
}
.prestamistas-afines > * { position: relative; }
/* ==========================================================================
COMPARATIVA TABLA — filas alternadas con tinte
========================================================================== */
.comparativa__tabla tbody tr:nth-child(even) td {
background: var(--surface-1);
}
.comparativa__tabla tbody tr:hover td {
background: var(--tint-lime);
}
/* ==========================================================================
POST RELACIONADOS — cards con acento sutil rotativo
========================================================================== */
.post__relacionados-lista li:nth-child(2n) a { border-left: 3px solid var(--accent-3); }
.post__relacionados-lista li:nth-child(2n+1) a { border-left: 3px solid var(--success); }
/* ==========================================================================
HOME HERO — gradiente diagonal con blob lima
========================================================================== */
.home-hero {
background: var(--gradient-hero);
position: relative;
}
.home-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 80% 20%, oklch(0.88 0.21 125 / 0.18) 0%, transparent 50%),
radial-gradient(circle at 15% 85%, oklch(0.55 0.18 250 / 0.20) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
.home-hero__body { z-index: 2; }
.home-hero__media img { mix-blend-mode: luminosity; opacity: 0.22; }
/* ==========================================================================
PILAR HERO sin imagen — degradado tintado
========================================================================== */
.pilar__hero--nomedia {
background: var(--gradient-soft-cool);
}
.pilar__hero--nomedia::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 90% 30%, oklch(0.88 0.21 125 / 0.10) 0%, transparent 50%);
pointer-events: none;
}
/* ==========================================================================
BREADCRUMB en hero con imagen: más legible
========================================================================== */
.pilar__hero .breadcrumb li,
.pilar__hero .breadcrumb a { color: oklch(0.99 0.002 250 / 0.78); }
.pilar__hero .breadcrumb a:hover { color: var(--ink-inverse); }
/* ==========================================================================
EQUIPO GRID — /sobre/ tarjetas horizontales con breakout
========================================================================== */
/* La página /sobre/ vive dentro de .legal con max-width: w-reading. Sacamos
el grid del confín con :has() para darle aire en desktop. */
.legal:has(.equipo-grid) {
max-width: 64rem;
}
.legal:has(.equipo-grid) .legal__cuerpo > h2,
.legal:has(.equipo-grid) .legal__cuerpo > p,
.legal:has(.equipo-grid) .legal__cuerpo > ul,
.legal:has(.equipo-grid) .legal__cuerpo > ol {
max-width: var(--w-reading);
margin-left: auto;
margin-right: auto;
}
.equipo-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
margin: 2.5rem 0 3.5rem;
}
.equipo-card {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"foto"
"nombre"
"cargo"
"formacion"
"bio";
gap: 0.25rem;
padding: 1.8rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-xl);
text-decoration: none;
color: var(--ink);
transition: transform var(--duration), box-shadow var(--duration), border-color var(--duration);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
@media (min-width: 48em) {
.equipo-card {
grid-template-columns: 128px 1fr;
grid-template-areas:
"foto nombre"
"foto cargo"
"foto formacion"
"bio bio";
column-gap: 2rem;
row-gap: 0.2rem;
padding: 2rem 2.2rem;
align-items: start;
}
}
.equipo-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: var(--ink);
transition: background var(--duration);
}
.equipo-card:nth-child(1)::before { background: var(--accent-3); }
.equipo-card:nth-child(2)::before { background: var(--success); }
.equipo-card:nth-child(3)::before { background: var(--accent-2); }
.equipo-card::after {
content: "";
position: absolute;
top: -50px; right: -50px;
width: 200px; height: 200px;
background: radial-gradient(circle, oklch(0.88 0.21 125 / 0.10) 0%, transparent 65%);
pointer-events: none;
opacity: 0;
transition: opacity var(--duration);
}
.equipo-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--rule-strong);
color: var(--ink);
}
.equipo-card:hover::after { opacity: 1; }
.equipo-card:hover::before { background: var(--accent); }
.equipo-card__foto {
grid-area: foto;
width: 92px;
height: 92px;
border-radius: var(--radius-full);
overflow: hidden;
margin: 0 0 1rem;
border: 3px solid var(--bg);
box-shadow: 0 0 0 1px var(--rule-strong);
transition: transform var(--duration) var(--ease-out), box-shadow var(--duration);
align-self: start;
}
@media (min-width: 48em) {
.equipo-card__foto {
width: 128px;
height: 128px;
margin: 0;
}
}
.equipo-card:hover .equipo-card__foto {
transform: scale(1.04);
box-shadow: 0 0 0 1px var(--ink);
}
.equipo-card__foto img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.equipo-card__nombre {
grid-area: nombre;
font-size: 1.25rem;
font-weight: 700;
margin: 0;
letter-spacing: -0.022em;
color: var(--ink);
line-height: 1.2;
}
@media (min-width: 48em) {
.equipo-card__nombre { font-size: 1.4rem; }
}
.equipo-card__cargo {
grid-area: cargo;
font-size: 0.9rem;
color: var(--accent-3);
margin: 0.2rem 0 0;
font-weight: 600;
letter-spacing: 0.01em;
}
.equipo-card:nth-child(2) .equipo-card__cargo { color: var(--success); }
.equipo-card:nth-child(3) .equipo-card__cargo { color: var(--accent-2); }
.equipo-card__formacion {
grid-area: formacion;
font-size: 0.85rem;
color: var(--ink-muted);
margin: 0.3rem 0 0;
}
.equipo-card__bio {
grid-area: bio;
font-size: 0.96rem;
color: var(--ink-soft);
margin: 1.2rem 0 0;
padding-top: 1.2rem;
border-top: 1px solid var(--rule);
line-height: 1.65;
}
/* ==========================================================================
HEADER LAYERING — sombra al scrollear + acabado más definido
========================================================================== */
.site-header {
background: oklch(0.99 0.002 250 / 0.78);
border-bottom: 1px solid oklch(0.91 0.006 250 / 0.6);
transition: transform var(--duration) var(--ease-out), box-shadow var(--duration), background var(--duration), border-color var(--duration);
}
.site-header.is-scrolled {
background: oklch(0.99 0.002 250 / 0.96);
border-bottom-color: var(--rule);
box-shadow: 0 2px 14px -6px oklch(0.16 0.014 250 / 0.18);
}
/* Línea decorativa lima sutil al final del header cuando scroll */
.site-header.is-scrolled::after {
content: "";
position: absolute;
bottom: -1px; left: 0;
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
opacity: 0.35;
pointer-events: none;
}
.site-header__brand {
transition: transform var(--duration);
}
.site-header__brand:hover {
transform: scale(1.02);
}
/* ==========================================================================
SVG DECORATIVOS — patterns inline para Kova grande + heros sin imagen
========================================================================== */
.kova::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
pointer-events: none;
z-index: 0;
}
/* Hero pilar sin imagen: pattern de líneas finas diagonal */
.pilar__hero--nomedia::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
pointer-events: none;
opacity: 0.6;
}
/* Pattern de puntos sutil en CTA box prestamista */
.cta-prestamista--box::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
pointer-events: none;
opacity: 0;
transition: opacity var(--duration);
}
.cta-prestamista--box:hover::before { opacity: 1; }
/* Pattern decorativo en hero ficha prestamista */
.prestamista__hero::after {
content: "";
position: absolute;
bottom: -20px;
right: -20px;
width: 200px; height: 200px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
pointer-events: none;
opacity: 0.8;
}
/* Decorativo en home hero — línea con dots */
.home-hero::after {
content: "";
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 60px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-x;
background-size: 200px 60px;
pointer-events: none;
z-index: 2;
opacity: 0.5;
}
/* ==========================================================================
MICROANIMATIONS extra
========================================================================== */
@keyframes shimmerSlide {
0% { background-position: -100% 50%; }
100% { background-position: 200% 50%; }
}
/* CTA prestamista con shimmer al hover */
.cta-prestamista__enlace {
position: relative;
overflow: hidden;
z-index: 1;
}
.cta-prestamista__enlace::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, oklch(0.99 0.002 250 / 0.35) 50%, transparent 100%);
background-size: 200% 100%;
background-position: -100% 50%;
pointer-events: none;
z-index: -1;
}
.cta-prestamista__enlace:hover::before {
animation: shimmerSlide 0.9s ease-out;
}
/* Numbers tabulares en datos clave para evitar saltos */
.prestamista__dato-valor,
.ranking__item-num,
.byline__meta,
.post__meta time {
font-variant-numeric: tabular-nums;
}
/* Card lift más vivo en cards principales */
.pilar-card,
.prestamistas-hub__enlace,
.equipo-card,
.spoke-card,
.cta-prestamista--card,
.ranking__item,
.home-manifesto__item {
will-change: transform;
}
/* Logo del header con sutil interaction */
.site-header__logo {
transition: filter var(--duration);
}
.site-header__brand:hover .site-header__logo {
filter: drop-shadow(0 2px 8px oklch(0.16 0.014 250 / 0.15));
}
/* Subtle reveal de la línea inferior al hover en post relacionados */
.post__relacionados-lista a {
position: relative;
overflow: hidden;
}
.post__relacionados-lista a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 0; height: 2px;
background: var(--accent);
transition: width var(--duration-slow) var(--ease-out);
}
.post__relacionados-lista a:hover::after {
width: 100%;
}
/* ==========================================================================
BUTTONS — ripple-style hover overlay
========================================================================== */
.btn,
.cta-prestamista__enlace,
.kova__cta-btn {
position: relative;
overflow: hidden;
}
.btn::before,
.kova__cta-btn::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: oklch(0.99 0.002 250 / 0.20);
transform: translate(-50%, -50%);
transition: width 0.5s var(--ease-out), height 0.5s var(--ease-out);
pointer-events: none;
}
.btn:hover::before,
.kova__cta-btn:hover::before {
width: 320px;
height: 320px;
}
.btn > *,
.kova__cta-btn > * { position: relative; z-index: 1; }
/* ==========================================================================
FICHA DE PRESTAMISTA — REDISEÑO COMPLETO (v3)
Diseño orientado a conversión + SEO. Bento asimétrico, TOC sticky,
CTA intermedio y sticky mobile, jerarquía visual fuerte.
========================================================================== */
/* ---------- HERO BENTO ---------- */
.ficha-hero {
margin: 1.6rem 0 2.5rem;
}
.ficha-hero__bento {
display: grid;
gap: 1.4rem;
grid-template-columns: 1fr;
}
@media (min-width: 64em) {
.ficha-hero__bento {
grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr);
gap: 1.8rem;
align-items: stretch;
}
}
.ficha-hero__principal {
position: relative;
padding: 2rem 1.8rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-xl);
display: grid;
gap: 1.6rem;
grid-template-columns: 1fr;
overflow: hidden;
}
@media (min-width: 48em) {
.ficha-hero__principal {
padding: 2.4rem 2.2rem;
grid-template-columns: auto 1fr;
gap: 2rem;
align-items: center;
}
}
/* Halo decorativo de marca */
.ficha-hero__principal::before {
content: "";
position: absolute;
inset: -40% -40% auto auto;
width: 70%;
height: 200%;
background: radial-gradient(circle, oklch(0.88 0.21 125 / 0.10) 0%, transparent 60%);
pointer-events: none;
opacity: 0.7;
}
.ficha-hero__principal > * { position: relative; z-index: 1; }
.ficha-hero__brand {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 200px;
aspect-ratio: 3 / 2;
background: var(--ink-inverse);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 14%;
flex-shrink: 0;
}
.ficha-hero__brand img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ficha-hero__brand-initials {
font-family: var(--font-display);
font-weight: 700;
font-size: 3rem;
color: var(--ink);
letter-spacing: -0.04em;
}
.ficha-hero__kicker {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.6rem;
}
.ficha-hero__titulo {
margin: 0 0 0.7rem;
font-size: clamp(1.7rem, 2.5vw + 1rem, 2.4rem);
font-weight: 700;
letter-spacing: -0.028em;
line-height: 1.06;
color: var(--ink);
}
.ficha-hero__claim {
font-size: 1.05rem;
color: var(--ink-soft);
line-height: 1.55;
margin: 0 0 1.2rem;
}
.ficha-hero__pills {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.ficha-hero__pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.75rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-full);
font-size: 0.8rem;
color: var(--ink);
font-weight: 500;
}
.ficha-hero__pill svg {
width: 14px;
height: 14px;
color: var(--accent-3);
}
.ficha-hero__pill--mini {
font-size: 0.74rem;
color: var(--ink-muted);
font-weight: 400;
padding: 0.35rem 0.65rem;
}
/* CTA premium del hero */
.ficha-hero__cta {
display: flex;
flex-direction: column;
padding: 1.8rem;
background:
radial-gradient(ellipse 110% 75% at 100% 0%, oklch(0.88 0.21 125 / 0.25) 0%, transparent 60%),
var(--ink);
color: var(--ink-inverse);
border-radius: var(--radius-xl);
position: relative;
overflow: hidden;
}
.ficha-hero__cta > * { position: relative; z-index: 1; }
.ficha-hero__cta-kicker {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 0.5rem;
}
.ficha-hero__cta-titulo {
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 0.5rem;
letter-spacing: -0.022em;
line-height: 1.2;
}
.ficha-hero__cta-titulo strong {
color: var(--accent);
}
.ficha-hero__cta-sub {
font-size: 0.88rem;
color: oklch(1 0 0 / 0.7);
margin: 0 0 1.2rem;
line-height: 1.5;
}
.ficha-hero__cta-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.7rem;
width: 100%;
padding: 1rem 1.3rem;
background: var(--accent);
color: var(--accent-ink);
font-weight: 700;
font-size: 1rem;
text-decoration: none;
border-radius: var(--radius-md);
letter-spacing: -0.015em;
transition: transform var(--duration-fast), box-shadow var(--duration-fast);
box-shadow: 0 4px 16px oklch(0.88 0.21 125 / 0.35);
margin-top: auto;
}
.ficha-hero__cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px oklch(0.88 0.21 125 / 0.55);
color: var(--accent-ink);
}
.ficha-hero__cta-arrow {
transition: transform var(--duration-fast);
}
.ficha-hero__cta-btn:hover .ficha-hero__cta-arrow {
transform: translateX(4px);
}
.ficha-hero__cta-micro {
font-size: 0.72rem;
color: oklch(1 0 0 / 0.55);
margin: 0.9rem 0 0;
line-height: 1.4;
}
/* Datos clave en banda horizontal bajo el hero */
.ficha-hero__datos {
display: grid;
gap: 1px;
grid-template-columns: 1fr;
margin-top: 1.4rem;
background: var(--rule);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
overflow: hidden;
}
@media (min-width: 40em) {
.ficha-hero__datos { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64em) {
.ficha-hero__datos { grid-template-columns: repeat(4, 1fr); }
/* Cuando la ficha no tiene los 4 datos clave (típico: comparadores sin TAE
propia como Prestalo), evitamos la celda gris vacía colapsando el grid
al nº real de hijos. */
.ficha-hero__datos:has(.ficha-dato:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.ficha-hero__datos:has(.ficha-dato:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.ficha-hero__datos:has(.ficha-dato:only-child) { grid-template-columns: 1fr; }
}
.ficha-dato {
padding: 1.2rem 1.4rem;
background: var(--bg);
}
.ficha-dato--ingreso {
grid-column: 1 / -1;
}
@media (min-width: 64em) {
.ficha-dato--ingreso { grid-column: auto; }
}
.ficha-dato__label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.4rem;
}
.ficha-dato__valor {
font-size: 1.6rem;
font-weight: 700;
color: var(--ink);
margin: 0;
line-height: 1.1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.022em;
}
.ficha-dato__valor--texto {
font-size: 0.98rem;
line-height: 1.35;
font-weight: 600;
letter-spacing: -0.012em;
}
.ficha-dato__sep {
color: var(--ink-faint);
font-weight: 400;
margin: 0 0.1em;
}
.ficha-dato__unit {
font-size: 0.72em;
color: var(--ink-muted);
font-weight: 600;
margin-left: 0.15em;
}
/* ---------- TOC NAVEGACIÓN INTERNA ---------- */
.ficha-toc {
margin: 2rem 0 2.5rem;
padding: 0.7rem 0.9rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-full);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ficha-toc::-webkit-scrollbar { display: none; }
.ficha-toc ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: stretch;
gap: 0.3rem;
white-space: nowrap;
}
.ficha-toc li {
display: inline-flex;
align-items: center;
}
.ficha-toc a {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.85rem;
color: var(--ink-soft);
text-decoration: none;
font-size: 0.84rem;
font-weight: 500;
line-height: 1;
border-radius: var(--radius-full);
transition: background var(--duration-fast), color var(--duration-fast);
}
.ficha-toc a:hover {
background: var(--ink);
color: var(--ink-inverse);
}
@media (min-width: 64em) {
.ficha-toc {
position: sticky;
top: 4.2rem;
z-index: 8;
backdrop-filter: blur(10px);
background: oklch(1 0 0 / 0.85);
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.ficha-toc.is-faded {
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
}
}
/* ---------- SECCIÓN BASE ---------- */
.ficha-seccion {
margin: 3.5rem 0;
max-width: var(--container);
}
.ficha-seccion__header {
margin-bottom: 1.4rem;
}
.ficha-seccion__kicker {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--accent-ink);
background: var(--accent);
padding: 0.25rem 0.65rem;
border-radius: var(--radius-full);
margin: 0 0 0.8rem;
}
.ficha-seccion__header h2 {
font-size: clamp(1.4rem, 1.6vw + 1rem, 1.9rem);
font-weight: 700;
letter-spacing: -0.026em;
margin: 0;
line-height: 1.15;
}
.ficha-seccion__intro {
margin: 0.6rem 0 0;
color: var(--ink-soft);
font-size: 0.98rem;
line-height: 1.55;
max-width: var(--w-reading);
}
/* ---------- VEREDICTO ¿para quién? ---------- */
.ficha-veredicto__grid {
display: grid;
gap: 1.2rem;
grid-template-columns: 1fr;
}
@media (min-width: 56em) {
.ficha-veredicto__grid { grid-template-columns: 1fr 1fr; }
}
.ficha-veredicto__bloque {
padding: 1.6rem 1.8rem;
border-radius: var(--radius-lg);
border: 1px solid var(--rule);
background: var(--bg);
}
.ficha-veredicto__bloque--si {
background: oklch(0.97 0.04 145);
border-color: oklch(0.85 0.12 145 / 0.55);
}
.ficha-veredicto__bloque--no {
background: oklch(0.97 0.025 30);
border-color: oklch(0.85 0.10 30 / 0.5);
}
.ficha-veredicto__head {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 1rem;
}
.ficha-veredicto__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
flex-shrink: 0;
}
.ficha-veredicto__icon svg { width: 22px; height: 22px; }
.ficha-veredicto__bloque--si .ficha-veredicto__icon {
background: var(--success);
color: var(--ink-inverse);
}
.ficha-veredicto__bloque--no .ficha-veredicto__icon {
background: oklch(0.55 0.20 25);
color: var(--ink-inverse);
}
.ficha-veredicto__bloque h3 {
font-size: 1.15rem;
font-weight: 700;
margin: 0;
letter-spacing: -0.018em;
}
.ficha-veredicto__bloque--si h3 { color: var(--success); }
.ficha-veredicto__bloque--no h3 { color: oklch(0.45 0.18 25); }
.ficha-veredicto__cuerpo p {
margin: 0 0 0.7rem;
color: var(--ink);
font-size: 0.96rem;
line-height: 1.6;
}
.ficha-veredicto__cuerpo p:last-child { margin-bottom: 0; }
/* ---------- EJEMPLO REPRESENTATIVO ---------- */
.ficha-ejemplo {
padding: 0;
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--surface-2);
color: var(--ink);
border: 1px solid var(--rule);
}
.ficha-ejemplo__grid {
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
}
@media (min-width: 48em) {
.ficha-ejemplo__grid {
grid-template-columns: minmax(220px, 1fr) 3fr;
}
/* Comparadores sin TAE propia (Prestalo, Credy…): texto a ancho completo */
.ficha-ejemplo--sin-cifra .ficha-ejemplo__grid {
grid-template-columns: 1fr;
}
}
.ficha-ejemplo__cifra {
padding: 2rem 1.6rem;
background: var(--accent);
color: var(--accent-ink);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-width: 0;
}
.ficha-ejemplo__label {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
margin: 0 0 0.5rem;
}
.ficha-ejemplo__num {
font-size: clamp(2.4rem, 3.5vw + 1rem, 3.4rem);
font-weight: 700;
margin: 0;
line-height: 1;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
}
.ficha-ejemplo__num span {
font-size: 0.55em;
margin-left: 0.05em;
font-weight: 600;
}
.ficha-ejemplo__rango {
font-size: 0.85rem;
font-weight: 500;
margin: 0.5rem 0 0;
opacity: 0.9;
}
.ficha-ejemplo__texto {
padding: 1.8rem 2rem;
}
.ficha-ejemplo__texto h2 {
font-size: 1.2rem;
font-weight: 700;
margin: 0 0 0.7rem;
color: var(--ink);
letter-spacing: -0.018em;
}
.ficha-ejemplo__texto p {
font-size: 0.95rem;
line-height: 1.55;
margin: 0 0 0.7rem;
color: var(--ink-soft);
}
.ficha-ejemplo__nota {
font-size: 0.78rem;
color: var(--ink-muted);
margin: 0;
}
.ficha-ejemplo__nota a,
.ficha-ejemplo__texto p a {
color: var(--ink);
text-decoration: underline;
font-weight: 600;
}
.ficha-ejemplo__nota a:hover,
.ficha-ejemplo__texto p a:hover {
color: var(--accent-ink);
background: var(--accent);
padding: 0 2px;
border-radius: 3px;
}
/* ---------- PROS / CONTRAS ---------- */
.ficha-procontra__grid {
display: grid;
gap: 1.2rem;
grid-template-columns: 1fr;
}
@media (min-width: 56em) {
.ficha-procontra__grid { grid-template-columns: 1fr 1fr; }
}
.ficha-procontra__col {
padding: 1.6rem 1.8rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
}
.ficha-procontra__col h3 {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 1rem;
letter-spacing: -0.018em;
}
.ficha-procontra__col h3 span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 1.1rem;
font-weight: 700;
flex-shrink: 0;
}
.ficha-procontra__col--pros h3 { color: var(--success); }
.ficha-procontra__col--pros h3 span { background: var(--success-soft); color: var(--success); }
.ficha-procontra__col--contras h3 { color: oklch(0.45 0.18 25); }
.ficha-procontra__col--contras h3 span { background: oklch(0.94 0.018 30); color: oklch(0.55 0.18 25); }
.ficha-procontra__col ul {
list-style: none;
padding: 0;
margin: 0;
}
.ficha-procontra__col li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.7rem 0;
border-bottom: 1px dashed var(--rule);
font-size: 0.95rem;
line-height: 1.45;
}
.ficha-procontra__col li:last-child { border-bottom: 0; }
.ficha-procontra__tick {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 3px;
}
.ficha-procontra__col--pros .ficha-procontra__tick { color: var(--success); }
.ficha-procontra__col--contras .ficha-procontra__tick { color: oklch(0.55 0.18 25); }
/* ---------- REQUISITOS GRID ---------- */
.ficha-requisitos__grid {
display: grid;
gap: 0.9rem;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.ficha-requisito {
padding: 1rem 1.2rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
min-width: 0;
position: relative;
}
.ficha-requisito__label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.3rem;
}
.ficha-requisito__valor {
font-size: 1rem;
font-weight: 600;
color: var(--ink);
margin: 0;
line-height: 1.3;
}
.ficha-requisito--si { border-color: oklch(0.85 0.12 145 / 0.45); background: oklch(0.98 0.02 145); }
.ficha-requisito--no { opacity: 0.7; background: var(--surface-1); }
.ficha-requisito--no .ficha-requisito__valor { color: var(--ink-muted); }
.ficha-requisito--parcial { border-color: oklch(0.85 0.13 75 / 0.55); background: oklch(0.98 0.03 75); }
.ficha-requisitos__doc {
margin-top: 1.4rem;
padding: 1.2rem 1.4rem;
background: var(--surface-1);
border-radius: var(--radius-md);
}
.ficha-requisitos__doc-label {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.6rem;
}
.ficha-requisitos__doc-lista {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.ficha-requisitos__doc-lista li {
padding: 0.35rem 0.7rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-full);
font-size: 0.85rem;
color: var(--ink);
}
/* ---------- CTA BANNER INTERMEDIO ---------- */
.ficha-cta-banner {
margin: 3.5rem 0;
padding: 1.8rem 2rem;
background: linear-gradient(135deg, var(--ink) 0%, oklch(0.22 0.018 250) 100%);
color: var(--ink-inverse);
border-radius: var(--radius-xl);
display: grid;
gap: 1.2rem;
grid-template-columns: 1fr;
align-items: center;
position: relative;
overflow: hidden;
}
@media (min-width: 52em) {
.ficha-cta-banner {
grid-template-columns: 1fr auto;
padding: 2rem 2.4rem;
}
}
.ficha-cta-banner::before {
content: "";
position: absolute;
inset: -40% -10% auto auto;
width: 50%;
height: 200%;
background: radial-gradient(circle, oklch(0.88 0.21 125 / 0.22) 0%, transparent 60%);
pointer-events: none;
}
.ficha-cta-banner > * { position: relative; z-index: 1; }
.ficha-cta-banner__kicker {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 0.4rem;
}
.ficha-cta-banner__titulo {
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 0.4rem;
letter-spacing: -0.02em;
color: var(--ink-inverse);
}
.ficha-cta-banner__sub {
font-size: 0.9rem;
margin: 0;
color: oklch(1 0 0 / 0.65);
}
.ficha-cta-banner__btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.9rem 1.5rem;
background: var(--accent);
color: var(--accent-ink);
font-weight: 700;
text-decoration: none;
border-radius: var(--radius-md);
white-space: nowrap;
transition: transform var(--duration-fast), box-shadow var(--duration-fast);
box-shadow: 0 4px 12px oklch(0.88 0.21 125 / 0.35);
}
.ficha-cta-banner__btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px oklch(0.88 0.21 125 / 0.50);
color: var(--accent-ink);
}
/* ---------- BENTO LETRA + CONFIANZA ---------- */
.ficha-bento__grid {
display: grid;
gap: 1.4rem;
grid-template-columns: 1fr;
}
@media (min-width: 64em) {
.ficha-bento__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}
.ficha-bento__item { min-width: 0; }
.ficha-letra {
padding: 1.8rem 2rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
}
.ficha-letra .ficha-seccion__header { margin-bottom: 1.2rem; }
.ficha-letra__cuerpo p {
margin: 0 0 0.9rem;
font-size: 0.96rem;
line-height: 1.65;
}
.ficha-letra__cuerpo p:last-child { margin-bottom: 0; }
.ficha-letra__cuerpo .letra-lista {
list-style: none;
counter-reset: letra;
padding: 0;
margin: 0.9rem 0 1rem;
display: grid;
gap: 0.55rem;
}
.ficha-letra__cuerpo .letra-lista li {
position: relative;
padding: 0.75rem 1rem 0.75rem 2.8rem;
background: var(--bg);
border: 1px solid var(--rule);
border-left: 3px solid var(--accent);
border-radius: var(--radius-md);
font-size: 0.94rem;
line-height: 1.5;
color: var(--ink);
}
.ficha-letra__cuerpo ol.letra-lista li::before {
counter-increment: letra;
content: counter(letra);
position: absolute;
left: 0.85rem;
top: 0.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent);
color: var(--accent-ink);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
}
.ficha-letra__cuerpo ul.letra-lista li::before {
content: "•";
position: absolute;
left: 1rem;
top: 0.45rem;
color: var(--accent);
font-weight: 700;
font-size: 1.6rem;
}
.ficha-confianza {
padding: 1.8rem;
background:
radial-gradient(ellipse 120% 80% at 100% 0%, oklch(0.88 0.21 125 / 0.20) 0%, transparent 60%),
var(--ink);
color: var(--ink-inverse);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.ficha-confianza > * { position: relative; z-index: 1; }
.ficha-confianza__kicker {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 0.5rem;
}
.ficha-confianza__titulo {
font-size: 1.2rem;
font-weight: 700;
margin: 0 0 1.2rem;
color: var(--ink-inverse);
letter-spacing: -0.022em;
}
.ficha-confianza__lista {
list-style: none;
padding: 0;
margin: 0;
}
.ficha-confianza__lista li {
padding: 0.8rem 0;
border-bottom: 1px solid oklch(1 0 0 / 0.10);
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.ficha-confianza__lista li:last-child { border-bottom: 0; }
.ficha-confianza__lista strong {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: oklch(1 0 0 / 0.55);
font-weight: 700;
}
.ficha-confianza__lista span {
font-size: 0.92rem;
color: var(--ink-inverse);
font-weight: 500;
line-height: 1.4;
}
.ficha-confianza a {
color: var(--accent);
text-decoration: underline;
}
.ficha-confianza a:hover { color: var(--ink-inverse); }
.ficha-confianza__rating { color: var(--accent) !important; font-weight: 700 !important; }
/* ---------- FAQ ACCORDION ---------- */
.ficha-faq__lista {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ficha-faq__item {
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--duration-fast);
}
.ficha-faq__item[open] {
border-color: var(--ink);
box-shadow: var(--shadow-sm);
}
.ficha-faq__pregunta {
list-style: none;
cursor: pointer;
padding: 1.1rem 1.4rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-size: 1rem;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.014em;
user-select: none;
}
.ficha-faq__pregunta::-webkit-details-marker { display: none; }
.ficha-faq__pregunta::marker { display: none; }
.ficha-faq__chevron {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--surface-1);
font-weight: 400;
font-size: 1.3rem;
line-height: 1;
transition: transform var(--duration-fast), background var(--duration-fast);
}
.ficha-faq__item[open] .ficha-faq__chevron {
transform: rotate(45deg);
background: var(--accent);
color: var(--accent-ink);
}
.ficha-faq__respuesta {
padding: 0 1.4rem 1.2rem;
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.65;
}
.ficha-faq__respuesta p { margin: 0 0 0.7rem; }
.ficha-faq__respuesta p:last-child { margin-bottom: 0; }
/* ---------- CTA FINAL ---------- */
.ficha-cta-final {
margin: 3.5rem 0 2rem;
padding: 2.4rem 2rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-xl);
text-align: center;
}
@media (min-width: 48em) {
.ficha-cta-final { padding: 3rem 2.4rem; }
}
.ficha-cta-final__head { margin-bottom: 1.4rem; }
.ficha-cta-final__kicker {
display: inline-block;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--accent-ink);
background: var(--accent);
padding: 0.3rem 0.7rem;
border-radius: var(--radius-full);
margin: 0 0 0.9rem;
}
.ficha-cta-final h2 {
font-size: clamp(1.5rem, 2vw + 1rem, 2.1rem);
font-weight: 700;
margin: 0 0 0.6rem;
letter-spacing: -0.026em;
}
.ficha-cta-final__sub {
font-size: 0.98rem;
color: var(--ink-soft);
margin: 0;
max-width: 52ch;
margin-left: auto;
margin-right: auto;
line-height: 1.55;
}
.ficha-cta-final__btn {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 1.1rem 2rem;
background: var(--ink);
color: var(--ink-inverse);
font-weight: 700;
font-size: 1.05rem;
text-decoration: none;
border-radius: var(--radius-md);
letter-spacing: -0.015em;
margin: 1.6rem 0 0.9rem;
transition: transform var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
box-shadow: 0 6px 20px oklch(0.16 0.012 250 / 0.18);
position: relative;
overflow: hidden;
}
.ficha-cta-final__btn:hover {
transform: translateY(-2px);
background: oklch(0.22 0.018 250);
color: var(--ink-inverse);
box-shadow: 0 10px 30px oklch(0.16 0.012 250 / 0.25);
}
.ficha-cta-final__arrow { transition: transform var(--duration-fast); }
.ficha-cta-final__btn:hover .ficha-cta-final__arrow { transform: translateX(4px); }
.ficha-cta-final__legal {
font-size: 0.76rem;
color: var(--ink-muted);
margin: 0;
line-height: 1.5;
}
/* ---------- ALTERNATIVAS ---------- */
.ficha-alternativas .prestamistas-afines__grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 46em) {
.ficha-alternativas .prestamistas-afines__grid { grid-template-columns: repeat(3, 1fr); }
}
/* ---------- STICKY MOBILE CTA ---------- */
.ficha-sticky-mobile {
position: fixed;
left: 1rem;
right: 1rem;
bottom: 1rem;
z-index: 50;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.7rem 1rem;
background: var(--ink);
color: var(--ink-inverse);
text-decoration: none;
border-radius: var(--radius-full);
box-shadow: 0 8px 30px oklch(0.16 0.012 250 / 0.30);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: -0.015em;
}
.ficha-sticky-mobile:hover {
color: var(--ink-inverse);
background: oklch(0.22 0.018 250);
}
.ficha-sticky-mobile__brand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
background: var(--ink-inverse);
border-radius: 50%;
padding: 5px;
flex-shrink: 0;
}
.ficha-sticky-mobile__brand img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ficha-sticky-mobile__texto {
flex: 1;
}
.ficha-sticky-mobile__texto strong {
color: var(--accent);
font-weight: 700;
}
.ficha-sticky-mobile__arrow {
background: var(--accent);
color: var(--accent-ink);
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
font-weight: 700;
flex-shrink: 0;
}
@media (min-width: 56em) {
.ficha-sticky-mobile { display: none; }
}
/* ==========================================================================
RANKING — KPIs Trustpilot + rating por item
========================================================================== */
.ranking__kpis {
display: grid;
gap: 0.8rem;
grid-template-columns: 1fr;
margin: 1.4rem 0 2rem;
}
@media (min-width: 48em) {
.ranking__kpis { grid-template-columns: repeat(3, 1fr); }
}
.ranking-kpi {
padding: 1.1rem 1.3rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.ranking-kpi__label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0;
}
.ranking-kpi__valor {
margin: 0;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.022em;
color: var(--ink);
display: flex;
align-items: baseline;
gap: 0.3rem;
}
.ranking-kpi__num {
font-size: 1.8rem;
line-height: 1;
}
.ranking-kpi__unit {
font-size: 0.95rem;
color: var(--ink-muted);
font-weight: 600;
}
.ranking-kpi__estrella {
color: oklch(0.72 0.18 75);
font-size: 1.1rem;
margin-left: 0.2rem;
}
.ranking-kpi__sub {
margin: 0;
font-size: 0.78rem;
color: var(--ink-muted);
}
.ranking__item-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem 1rem;
margin-bottom: 0.4rem;
}
.ranking__item-rating {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
color: var(--ink);
}
.ranking__item-rating-stars {
display: inline-flex;
gap: 1px;
font-size: 0.95rem;
line-height: 1;
}
.ranking__item-rating strong {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.ranking__item-rating-count {
color: var(--ink-muted);
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
FICHA — SECCIÓN FIABILIDAD (verdicto autogenerado)
========================================================================== */
.fiabilidad {
display: grid;
gap: 1.4rem;
grid-template-columns: 1fr;
padding: 1.6rem 1.8rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
border-left: 4px solid var(--rule-strong, var(--ink-muted));
}
.fiabilidad--alto { border-left-color: var(--success); }
.fiabilidad--medio { border-left-color: oklch(0.65 0.18 75); }
.fiabilidad--bajo { border-left-color: oklch(0.55 0.20 25); }
.fiabilidad--sin_datos { border-left-color: var(--ink-faint); }
@media (min-width: 64em) {
.fiabilidad { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.fiabilidad__verdicto {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.fiabilidad__badge {
display: inline-flex;
align-self: flex-start;
align-items: center;
padding: 0.4rem 0.85rem;
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.fiabilidad__badge--alto { background: var(--success-soft); color: var(--success); }
.fiabilidad__badge--medio { background: oklch(0.95 0.06 80); color: oklch(0.42 0.16 75); }
.fiabilidad__badge--bajo { background: oklch(0.94 0.05 30); color: oklch(0.45 0.18 25); }
.fiabilidad__badge--sin_datos { background: var(--surface-2); color: var(--ink-muted); }
.fiabilidad__resumen {
margin: 0;
font-size: 0.98rem;
line-height: 1.6;
color: var(--ink);
}
.fiabilidad__indicadores {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.6rem;
}
.fiabilidad__indicador {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.7rem 0.9rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
font-size: 0.88rem;
}
.fiabilidad__indicador-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-muted);
}
.fiabilidad__indicador-valor {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--ink);
font-weight: 500;
}
.fiabilidad__check {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-weight: 700;
font-size: 0.85rem;
line-height: 1;
}
.fiabilidad__check--si { background: var(--success-soft); color: var(--success); }
.fiabilidad__check--medio { background: oklch(0.96 0.05 80); color: oklch(0.45 0.16 75); }
.fiabilidad__check--no { background: oklch(0.94 0.04 30); color: oklch(0.55 0.18 25); }
/* ==========================================================================
FICHA — SECCIÓN TRUSTPILOT
========================================================================== */
.trustpilot-bloque {
display: grid;
gap: 1.4rem;
grid-template-columns: 1fr;
}
@media (min-width: 64em) {
.trustpilot-bloque { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.trustpilot-bloque__resumen {
padding: 1.8rem 2rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
}
.trustpilot-puntuacion { text-align: left; margin-bottom: 1.3rem; }
.trustpilot-puntuacion__num {
font-size: clamp(2.6rem, 4vw + 1rem, 3.6rem);
font-weight: 700;
margin: 0;
line-height: 1;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.trustpilot-puntuacion__num span {
font-size: 0.4em;
color: var(--ink-muted);
font-weight: 600;
margin-left: 0.1em;
}
.trustpilot-puntuacion__label {
display: inline-block;
margin: 0.6rem 0 0.4rem;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: -0.012em;
padding: 0.3rem 0.7rem;
border-radius: var(--radius-full);
background: var(--surface-1);
border: 1px solid var(--rule);
}
.trustpilot-puntuacion__label--excelente { background: oklch(0.94 0.10 145); color: oklch(0.35 0.18 145); border-color: transparent; }
.trustpilot-puntuacion__label--genial { background: oklch(0.95 0.06 145); color: var(--success); border-color: transparent; }
.trustpilot-puntuacion__label--bueno { background: oklch(0.95 0.04 90); color: oklch(0.45 0.14 95); border-color: transparent; }
.trustpilot-puntuacion__label--pobre { background: oklch(0.95 0.04 60); color: oklch(0.45 0.16 60); border-color: transparent; }
.trustpilot-puntuacion__label--malo { background: oklch(0.95 0.04 30); color: oklch(0.45 0.18 25); border-color: transparent; }
.trustpilot-puntuacion__total {
margin: 0 0 0.6rem;
color: var(--ink-soft);
font-size: 0.92rem;
}
.trustpilot-puntuacion__estrellas {
display: inline-flex;
gap: 2px;
font-size: 1.5rem;
line-height: 1;
}
.trustpilot-estrella {
color: oklch(0.88 0.018 250);
}
.trustpilot-estrella--llena {
color: oklch(0.72 0.18 75);
}
.trustpilot-estrella--media {
background: linear-gradient(90deg, oklch(0.72 0.18 75) 50%, oklch(0.88 0.018 250) 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.trustpilot-dist {
list-style: none;
margin: 1.2rem 0;
padding: 0;
display: grid;
gap: 0.45rem;
}
.trustpilot-dist__fila {
display: grid;
grid-template-columns: auto auto 1fr auto;
gap: 0.5rem;
align-items: center;
font-size: 0.86rem;
font-variant-numeric: tabular-nums;
}
.trustpilot-dist__num {
font-weight: 600;
color: var(--ink-muted);
min-width: 0.8em;
}
.trustpilot-dist__estrella {
color: oklch(0.72 0.18 75);
font-size: 0.95rem;
line-height: 1;
}
.trustpilot-dist__barra {
display: block;
height: 9px;
background: oklch(0.93 0.008 250);
border-radius: var(--radius-full);
overflow: hidden;
position: relative;
}
.trustpilot-dist__fill {
display: block;
height: 100%;
border-radius: var(--radius-full);
transition: width 0.6s var(--ease-out);
}
.trustpilot-dist__fill--verde { background: oklch(0.72 0.18 145); }
.trustpilot-dist__fill--amarillo { background: oklch(0.78 0.15 90); }
.trustpilot-dist__fill--rojo { background: oklch(0.65 0.20 30); }
.trustpilot-dist__pct {
color: var(--ink-muted);
font-size: 0.82rem;
min-width: 2.8em;
text-align: right;
}
.trustpilot-meta {
margin: 1.2rem 0 0;
padding-top: 1.1rem;
border-top: 1px solid var(--rule);
}
.trustpilot-meta__pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.7rem;
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 0.84rem;
border-radius: var(--radius-full);
margin: 0;
}
.trustpilot-meta__pill svg { width: 14px; height: 14px; }
.trustpilot-meta__pill strong { font-weight: 700; }
.trustpilot-meta__fecha {
margin: 0.6rem 0 0;
font-size: 0.78rem;
color: var(--ink-muted);
}
.trustpilot-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1rem;
padding: 0.6rem 0.95rem;
background: var(--ink);
color: var(--ink-inverse);
font-weight: 600;
font-size: 0.88rem;
text-decoration: none;
border-radius: var(--radius-md);
transition: transform var(--duration-fast), background var(--duration-fast);
}
.trustpilot-link:hover {
transform: translateY(-1px);
background: oklch(0.22 0.018 250);
color: var(--ink-inverse);
}
/* Snippets — cards laterales */
.trustpilot-snippets-titulo {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.8rem;
}
.trustpilot-snippets {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.8rem;
}
.trustpilot-snippet {
padding: 1.1rem 1.3rem;
background: var(--bg);
border: 1px solid var(--rule);
border-left: 3px solid var(--rule-strong);
border-radius: var(--radius-md);
transition: border-color var(--duration);
}
.trustpilot-snippet:hover { border-color: var(--ink); }
.trustpilot-snippet--positiva { border-left-color: var(--success); }
.trustpilot-snippet--neutra { border-left-color: oklch(0.72 0.13 90); }
.trustpilot-snippet--negativa { border-left-color: oklch(0.55 0.20 25); }
.trustpilot-snippet__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.7rem;
margin-bottom: 0.5rem;
}
.trustpilot-snippet__rating {
display: inline-flex;
gap: 1px;
font-size: 1rem;
line-height: 1;
}
.trustpilot-snippet__badge {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.15rem 0.5rem;
background: var(--accent-soft);
color: var(--accent-ink);
border-radius: var(--radius-full);
}
.trustpilot-snippet__titulo {
font-size: 0.96rem;
font-weight: 600;
margin: 0 0 0.35rem;
letter-spacing: -0.014em;
color: var(--ink);
line-height: 1.3;
}
.trustpilot-snippet__texto {
margin: 0 0 0.6rem;
font-size: 0.88rem;
line-height: 1.5;
color: var(--ink-soft);
}
.trustpilot-snippet__pie {
margin: 0;
font-size: 0.78rem;
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
}
.trustpilot-snippet__autor { font-weight: 600; color: var(--ink); }
/* ==========================================================================
COMPARADOR DE PRESTAMOS (widget)
========================================================================== */
.cmp {
padding: 1.6rem 1.8rem;
background: oklch(0.16 0.012 250);
color: var(--ink-inverse);
border: 1px solid oklch(0.30 0.012 250);
border-radius: var(--radius-lg);
margin: 0 0 1.6rem;
box-shadow: var(--shadow-md);
}
.cmp .cmp__filtro-label {
color: oklch(1 0 0 / 0.6);
}
.cmp .cmp__chip {
background: oklch(1 0 0 / 0.05);
border-color: oklch(1 0 0 / 0.15);
color: var(--ink-inverse);
}
.cmp .cmp__chip:hover {
border-color: var(--accent);
}
.cmp .cmp__chip:has(input:checked) {
background: var(--ink-inverse);
color: var(--ink);
border-color: var(--ink-inverse);
}
.cmp .cmp__chip:has(input[type="radio"]:checked) {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
}
/* Slider del importe sobre fondo oscuro */
.cmp .input-range__label,
.cmp .input-range label,
.cmp label {
color: oklch(1 0 0 / 0.85);
}
.cmp input[type="number"],
.cmp input[type="range"] {
color-scheme: dark;
}
.cmp input[type="number"] {
background: oklch(1 0 0 / 0.06);
border-color: oklch(1 0 0 / 0.18);
color: var(--ink-inverse);
}
.cmp__filtros {
display: grid;
gap: 1.2rem;
}
@media (min-width: 48em) {
.cmp__filtros { grid-template-columns: 1fr 1fr; }
.cmp__filtro--importe { grid-column: 1 / -1; }
}
.cmp__filtro-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 0.5rem;
}
.cmp__chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.cmp__chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.8rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-full);
font-size: 0.85rem;
font-weight: 500;
color: var(--ink);
cursor: pointer;
user-select: none;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
.cmp__chip input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.cmp__chip:has(input:checked) {
background: var(--ink);
color: var(--ink-inverse);
border-color: var(--ink);
}
.cmp__chip:has(input[type="radio"]:checked) {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
}
.cmp__chip:hover { border-color: var(--ink); }
.cmp__head-resultado {
margin: 0 0 1.2rem;
}
.cmp__count {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.015em;
}
.cmp__cards {
display: grid;
gap: 0.9rem;
}
.cmp-card {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.2rem 1.4rem;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
transition: border-color var(--duration), transform var(--duration), box-shadow var(--duration);
}
@media (min-width: 48em) {
.cmp-card {
grid-template-columns: 120px 1fr auto;
align-items: center;
}
}
.cmp-card:hover {
border-color: var(--ink);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.cmp-card__brand {
width: 120px;
height: 80px;
background: var(--ink-inverse);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.cmp-card__brand img {
width: 100%;
height: 100%;
object-fit: contain;
}
.cmp-card__inicial {
font-family: var(--font-display);
font-size: 1.8rem;
font-weight: 700;
letter-spacing: -0.04em;
color: var(--ink);
}
.cmp-card__cuerpo { min-width: 0; }
.cmp-card__head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 0.8rem;
margin-bottom: 0.3rem;
}
.cmp-card__nombre {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.018em;
}
.cmp-card__rating {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 0.95rem;
line-height: 1;
}
.cmp-card__rating strong {
margin-left: 0.3rem;
font-weight: 700;
color: var(--ink);
}
.cmp-card__reviews {
font-size: 0.78rem;
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
}
.cmp-card__sin-rating {
font-size: 0.78rem;
color: var(--ink-muted);
font-style: italic;
}
.cmp-card__claim {
margin: 0.2rem 0 0.7rem;
color: var(--ink-soft);
font-size: 0.88rem;
line-height: 1.45;
}
.cmp-card__datos {
list-style: none;
margin: 0 0 0.7rem;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 0.5rem 1rem;
}
.cmp-card__datos li {
display: flex;
flex-direction: column;
font-size: 0.82rem;
font-variant-numeric: tabular-nums;
}
.cmp-card__datos span {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 0.1rem;
}
.cmp-card__datos strong {
color: var(--ink);
font-weight: 700;
font-size: 0.92rem;
}
.cmp-card__tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.cmp-card__tag {
display: inline-block;
padding: 0.2rem 0.55rem;
background: var(--surface-1);
border: 1px solid var(--rule);
border-radius: var(--radius-full);
font-size: 0.72rem;
font-weight: 600;
color: var(--ink-soft);
}
.cmp-card__tag--accent {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
}
.cmp-card__tag--si {
background: oklch(0.96 0.06 145);
color: var(--success);
border-color: oklch(0.85 0.10 145 / 0.5);
}
.cmp-card__tag--parcial {
background: oklch(0.96 0.04 90);
color: oklch(0.45 0.14 95);
border-color: oklch(0.85 0.10 90 / 0.5);
}
.cmp-card__acciones {
display: flex;
flex-direction: column;
gap: 0.45rem;
align-items: stretch;
}
@media (min-width: 48em) {
.cmp-card__acciones { min-width: 180px; }
}
.cmp-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.8rem 1.2rem;
background: var(--accent);
color: var(--accent-ink);
font-weight: 700;
text-decoration: none;
border-radius: var(--radius-md);
white-space: nowrap;
transition: transform var(--duration-fast), box-shadow var(--duration-fast);
box-shadow: 0 4px 12px oklch(0.88 0.21 125 / 0.3);
}
.cmp-card__cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px oklch(0.88 0.21 125 / 0.45);
color: var(--accent-ink);
}
.cmp-card__ficha {
text-align: center;
font-size: 0.82rem;
color: var(--ink-soft);
text-decoration: underline;
}
.cmp-card__ficha:hover { color: var(--ink); }