/*
Theme Name: MarketAtlas Theme
Theme URI: https://marketatlas.es
Description: Tema hijo de Hello Elementor para MarketAtlas. Sistema visual editorial cartográfico v0.4.
Author: MarketAtlas
Author URI: https://marketatlas.es
Template: hello-elementor
Version: 2.9.27
Text Domain: marketatlas-theme
*/
/* ============================================================
1. RESET UNIVERSAL
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ============================================================
2. TOKENS · Sistema visual v0.4
Extraídos de MarketAtlas-System.html (sección :root)
============================================================ */
:root {
/* COLOR */
--c-bg: #FAF7F2;
--c-paper: #FFFFFF;
--c-ink: #111827;
--c-ink-70: #374151;
--c-ink-50: #4B5563;
--c-ink-30: #9CA3AF;
--c-border: #E5E7EB;
--c-border-s: rgba(17,24,39,0.055);
--c-green: #166534;
--c-green-d: #0F4A25;
--c-green-l: rgba(22,101,52,0.09);
--c-gold: #B45309;
--c-gold-l: rgba(180,83,9,0.10);
--c-gold-paper: #FFFAF3;
--c-rup: #991B1B;
--c-rup-d: #7F1D1D;
--c-rup-l: rgba(153,27,27,0.09);
--c-seg: #1E40AF;
--c-seg-d: #1E3A8A;
--c-seg-l: rgba(30,64,175,0.09);
--c-dark: #1A1A2E;
/* COMPATIBILIDAD con paleta legacy (mientras se migra) */
--ma-bg-primary: var(--c-bg);
--ma-bg-card: var(--c-paper);
--ma-bg-footer: var(--c-dark);
--ma-text-heading: var(--c-ink);
--ma-text-body: var(--c-ink-70);
--ma-text-secondary: var(--c-ink-50);
--ma-green: var(--c-green);
--ma-green-hover: var(--c-green-d);
--ma-gold: var(--c-gold);
--ma-border: var(--c-border);
--ma-ruptura: var(--c-rup);
--ma-seguimiento: var(--c-seg);
--ma-white: var(--c-paper);
/* TIPOGRAFÍA */
--f-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
--f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* TAMAÑOS */
--t-display: clamp(40px, 5vw, 64px);
--t-h1: clamp(28px, 3.6vw, 44px);
--t-h2: clamp(22px, 2.4vw, 30px);
--t-h3: 19px;
--t-lede: 17px;
--t-body: 16px;
--t-body-s: 14px;
--t-meta: 11px;
--t-micro: 10px;
/* RADIOS y SOMBRAS */
--r-ui: 8px;
--r-card: 16px;
--sh-1: 0 1px 3px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
--sh-2: 0 4px 12px rgba(17,24,39,.08), 0 16px 32px rgba(17,24,39,.06);
/* TRANSICIONES */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 180ms;
--dur: 240ms;
/* LAYOUT */
--wrap-max: 1240px;
--col-prose: 760px;
--nav-h: 62px;
/* OVERRIDE Elementor globals — mantener para compatibilidad con páginas Elementor */
--e-global-color-primary: #166534 !important;
--e-global-color-secondary: #6B7280 !important;
--e-global-color-text: #111827 !important;
--e-global-color-accent: #B45309 !important;
}
/* ============================================================
3. BASE HTML
============================================================ */
html { scroll-behavior: smooth; }
body {
background: var(--c-bg);
color: var(--c-ink);
font-family: var(--f-sans);
font-size: var(--t-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
font-optical-sizing: auto;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; }
/* ============================================================
4. LAYOUT
============================================================ */
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 48px; }
.wrap-prose { max-width: var(--col-prose); margin: 0 auto; padding: 0 48px; }
@media (max-width: 768px) {
.wrap, .wrap-prose { padding: 0 22px; }
}
/* ============================================================
5. COMPONENTES ATÓMICOS
Extraídos literalmente de MarketAtlas-System.html (bloque
"PRIMITIVAS REUTILIZABLES", líneas 99-225) + .ma-reveal.
============================================================ */
/* — Eyebrow ——————————————————————————————— */
.ma-eyebrow{
font-family:var(--f-mono);
font-size:var(--t-meta);
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--c-ink-30);
display:inline-flex;
align-items:center;
gap:10px;
font-weight:500;
}
.ma-eyebrow::before{
content:"";
display:inline-block;
width:24px; height:12px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat-x;
background-size:24px 12px;
background-position:left center;
}
.ma-eyebrow--gold{color:var(--c-gold);}
.ma-eyebrow--green{color:var(--c-green);}
.ma-eyebrow--centered{justify-content:center;}
.ma-eyebrow--centered::after{
content:"";
display:inline-block;
width:24px; height:12px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat-x;
background-size:24px 12px;
background-position:right center;
}
.ma-eyebrow--plain::before,.ma-eyebrow--plain::after{display:none;}
/* — Pill ——————————————————————————————————— */
.ma-pill{
font-family:var(--f-mono);
font-size:var(--t-micro);
letter-spacing:0.16em;
text-transform:uppercase;
font-weight:600;
padding:5px 11px;
border-radius:100px;
display:inline-flex;
align-items:center;
gap:6px;
white-space:nowrap;
}
.ma-pill__dot{
width:6px;height:6px;border-radius:50%;flex-shrink:0;
background:currentColor;
}
.ma-pill--rup{background:var(--c-rup);color:#fff;}
.ma-pill--rup-soft{background:var(--c-rup-l);color:var(--c-rup);}
.ma-pill--seg{background:var(--c-seg);color:#fff;}
.ma-pill--seg-soft{background:var(--c-seg-l);color:var(--c-seg);}
.ma-pill--gratis{background:var(--c-green-l);color:var(--c-green);}
.ma-pill--premium{background:var(--c-gold-l);color:var(--c-gold);}
.ma-pill--premium::before{content:"★ ";margin-right:2px;letter-spacing:0;}
/* — Numeral (firma del producto) ———————— */
.ma-numeral{
font-family:var(--f-serif);
font-style:italic;
font-weight:400;
font-size:20px;
letter-spacing:-0.01em;
line-height:1;
color:var(--c-green);
}
.ma-numeral--md{font-size:26px;}
.ma-numeral--lg{font-size:36px;}
.ma-numeral--xl{font-size:56px;}
.ma-numeral--gold{color:var(--c-gold);}
.ma-numeral--paper{color:#fff;}
/* — Rule with tic marks (filete) ———————— */
.ma-rule{
height:12px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat-x;
background-size:40px 12px;
background-position:left center;
border:0;
margin:24px 0;
}
.ma-rule--ink{
background-image:url("data:image/svg+xml;utf8,");
}
.ma-rule--short{max-width:64px;}
/* — Tic corners (4 esquinas para láminas) ——— */
.ma-tic{
position:absolute;
width:16px; height:16px;
pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
}
.ma-tic--tl{top:-1px;left:-1px;}
.ma-tic--tr{top:-1px;right:-1px;transform:scaleX(-1);}
.ma-tic--bl{bottom:-1px;left:-1px;transform:scaleY(-1);}
.ma-tic--br{bottom:-1px;right:-1px;transform:scale(-1,-1);}
/* — Botón ——————————————————————————————— */
.ma-btn{
font-family:var(--f-sans);
font-size:14px;
font-weight:600;
padding:10px 22px;
border-radius:var(--r-ui);
display:inline-flex;
align-items:center;
gap:8px;
text-decoration:none;
border:1.5px solid transparent;
cursor:pointer;
transition:all 180ms cubic-bezier(0.4,0,0.2,1);
white-space:nowrap;
}
/* color del texto: a.ma-btn.X sube especificidad a (0,2,1) para ganar
a reglas de Elementor/Hello tipo .elementor-page a (0,2,0) que pisan
el color en páginas con body.elementor-page */
.ma-btn--primary{background:var(--c-green);border-color:var(--c-green);}
a.ma-btn.ma-btn--primary,.ma-btn.ma-btn--primary{color:#fff !important;}
.ma-btn--primary:hover{background:var(--c-green-d);border-color:var(--c-green-d);transform:translateY(-1px);}
.ma-btn--gold{background:var(--c-gold);border-color:var(--c-gold);}
a.ma-btn.ma-btn--gold,.ma-btn.ma-btn--gold{color:#fff !important;}
.ma-btn--gold:hover{background:#92400E;border-color:#92400E;transform:translateY(-1px);}
a.ma-btn.ma-btn--ghost,.ma-btn--ghost{background:transparent;color:var(--c-ink) !important;border-color:var(--c-border);}
.ma-btn--ghost:hover{border-color:var(--c-ink-50);}
.ma-btn--lg{font-size:15px;padding:13px 28px;}
/* — Reveal (animación de entrada al hacer scroll) ———————— */
.ma-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.ma-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.ma-reveal { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
6. SHELL GLOBAL · NAVBAR
Extraído de los HTML auditados (.nav-stub) y renombrado a
.site-nav para semántica. Sirve a header.php.
============================================================ */
.site-nav{
background:rgba(250,247,242,0.94);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border-bottom:1px solid var(--c-border-s);
position:sticky;top:0;z-index:100;
height:var(--nav-h);
}
.site-nav__inner{
display:flex;align-items:center;justify-content:space-between;height:100%;
}
.site-nav__brand{display:flex;align-items:center;gap:10px;}
.site-nav__brand-wrap{display:flex;align-items:center;gap:10px;}
.site-nav__name{
font-family:var(--f-serif);font-size:18px;font-weight:600;
letter-spacing:-0.02em;color:var(--c-ink);
}
.site-nav__beta{
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:10px;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;
padding:2px 8px;border-radius:100px;
background:rgba(22,101,52,0.09);color:#166534;
display:inline-flex;align-items:center;line-height:1.4;
}
.site-nav__links{
display:flex;gap:30px;list-style:none;font-size:14px;font-weight:500;
}
.site-nav__links a{color:var(--c-ink-50);transition:color 150ms;}
.site-nav__links a:hover{color:var(--c-green);}
.site-nav__cta{display:flex;align-items:center;gap:10px;}
@media(max-width:768px){
.site-nav__links{display:none;}
.site-nav__cta .ma-btn--ghost{display:none;}
}
/* ============================================================
7. SHELL GLOBAL · FOOTER
Extraído de los HTML auditados (.footer-stub) y renombrado a
.site-footer. Sirve a footer.php.
============================================================ */
.site-footer{
background:var(--c-dark);padding:40px 0 28px;color:rgba(255,255,255,0.4);
font-size:11.5px;line-height:1.65;
}
.site-footer__inner{
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
}
.site-footer__brand{
font-family:var(--f-serif);font-weight:600;font-size:16px;
color:#fff;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;
}
.site-footer__brand em{font-style:italic;color:rgba(255,255,255,0.7);}
.site-footer__legal{max-width:60ch;}
.site-footer__copy{
font-family:var(--f-mono);font-size:10px;letter-spacing:0.08em;
color:rgba(255,255,255,0.25);
}
/* .site-footer__links — regla NUEVA (Bloque 1): footer.php añade
enlaces legales que los HTML previos no incluían en su footer-stub. */
.site-footer__links{
display:flex;gap:18px;flex-wrap:wrap;
}
.site-footer__links a{
color:rgba(255,255,255,0.55);
transition:color 150ms;
}
.site-footer__links a:hover{color:#fff;}
/* ============================================================
8. PÁGINAS LEGALES + 404
Familia compartida: Aviso Legal, Cookies, Privacidad, 404.
CSS extraído literal de MarketAtlas-Cookies.html y
MarketAtlas-404.html (Bloque 2 · páginas estáticas).
============================================================ */
/* Variables que el CSS legal usa y que no estaban en el v0.4
(el resto de tokens ya viven en la sección 2). */
:root {
--c-placeholder: #FEF3C7;
--c-placeholder-border: #D97706;
}
/* Placeholder editorial (marcador amarillo de dato pendiente) */
.placeholder{
display:inline-block;
font-family:var(--f-mono);font-size:0.92em;
background:var(--c-placeholder);
border:1px dashed var(--c-placeholder-border);
color:var(--c-ink-70);
padding:1px 6px;border-radius:4px;
cursor:help;
letter-spacing:0;
}
/* Header común editorial */
.legal-header{
padding:56px 0 36px;border-bottom:1px solid var(--c-border-s);
}
.legal-header__inner{max-width:var(--col-prose);margin:0 auto;padding:0 48px;}
@media(max-width:768px){.legal-header__inner{padding:0 22px;}}
.legal-header h1{
font-family:var(--f-serif);font-weight:600;
font-size:var(--t-h1);line-height:1.05;letter-spacing:-0.025em;
color:var(--c-ink);margin:14px 0 12px;
}
.legal-header h1 em{font-style:italic;color:var(--c-green);font-weight:600;}
.legal-header__lede{
font-family:var(--f-serif);font-size:var(--t-lede);line-height:1.55;
color:var(--c-ink-70);max-width:58ch;font-weight:400;
}
.legal-header__meta{
font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:0.14em;
text-transform:uppercase;color:var(--c-ink-30);margin-top:18px;
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
/* Cuerpo prose */
.legal-body{padding:48px 0 80px;}
.legal-body__inner{max-width:var(--col-prose);margin:0 auto;padding:0 48px;}
@media(max-width:768px){.legal-body__inner{padding:0 22px;}}
.legal-body section + section{margin-top:40px;}
.legal-body h2{
font-family:var(--f-serif);font-size:var(--t-h2);font-weight:600;
letter-spacing:-0.018em;color:var(--c-ink);margin-bottom:12px;line-height:1.2;
}
.legal-body h3{
font-family:var(--f-serif);font-size:var(--t-h3);font-weight:600;
letter-spacing:-0.012em;color:var(--c-ink);margin:18px 0 6px;
}
.legal-body p{
font-family:var(--f-serif);font-size:16px;line-height:1.7;color:var(--c-ink-70);
margin-bottom:14px;
}
.legal-body p:last-child{margin-bottom:0;}
.legal-body strong{color:var(--c-ink);font-weight:600;}
.legal-body em{font-style:italic;}
.legal-body a{color:var(--c-green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.legal-body a:hover{color:var(--c-green-d);}
.legal-body ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:6px 0 14px;padding-left:18px;}
.legal-body ul li{
font-family:var(--f-serif);font-size:16px;line-height:1.65;color:var(--c-ink-70);
position:relative;padding-left:16px;
}
.legal-body ul li::before{
content:"";position:absolute;left:0;top:11px;
width:5px;height:5px;border-radius:50%;background:var(--c-green);
}
.legal-body code,.legal-body .term{
font-family:var(--f-mono);font-size:0.88em;
background:var(--c-bg);border:1px solid var(--c-border);
padding:1px 6px;border-radius:4px;letter-spacing:0.02em;
}
/* Tabla cookies · responsive */
.cookies-table-wrap{overflow-x:auto;margin:8px 0 14px;}
.cookies-table{
width:100%;border-collapse:collapse;
background:var(--c-paper);border:1px solid var(--c-border);border-radius:var(--r-ui);overflow:hidden;
font-family:var(--f-sans);
}
.cookies-table th{
font-family:var(--f-mono);font-size:10px;letter-spacing:0.14em;
text-transform:uppercase;color:var(--c-ink-30);font-weight:500;
padding:12px 14px;text-align:left;border-bottom:1px solid var(--c-border);
background:var(--c-bg);
}
.cookies-table td{
font-size:13.5px;color:var(--c-ink-70);padding:12px 14px;
border-bottom:1px solid var(--c-border-s);vertical-align:top;line-height:1.5;
}
.cookies-table tr:last-child td{border-bottom:none;}
.cookies-table td.t-mono{
font-family:var(--f-mono);font-size:12.5px;color:var(--c-ink);letter-spacing:0.02em;
}
.cookies-table td.t-type{font-family:var(--f-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--c-ink-50);}
/* Página de error 404 */
.err{padding:64px 0 80px;text-align:center;}
.err__inner{max-width:var(--col-prose);margin:0 auto;padding:0 48px;}
@media(max-width:768px){.err__inner{padding:0 22px;}}
.err h1{
font-family:var(--f-serif);font-weight:600;font-size:var(--t-h1);
line-height:1.05;letter-spacing:-0.025em;color:var(--c-ink);margin:14px 0 16px;
}
.err h1 em{font-style:italic;color:var(--c-green);font-weight:600;}
.err__lede{font-family:var(--f-serif);font-size:17px;line-height:1.6;color:var(--c-ink-70);max-width:54ch;margin:0 auto 36px;}
.err__links{
display:inline-flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
font-family:var(--f-sans);font-size:15px;
}
.err__links a{
color:var(--c-green);font-weight:600;
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
transition:gap var(--dur-fast),color var(--dur-fast);
display:inline-flex;align-items:center;gap:6px;
}
.err__links a:hover{color:var(--c-green-d);gap:10px;}
.err__sep{color:var(--c-border);}
.err__box{
max-width:46ch;margin:56px auto 0;
padding:18px 22px;background:var(--c-paper);border:1px solid var(--c-border);
border-radius:var(--r-ui);
}
.err__box p{font-family:var(--f-serif);font-size:14.5px;line-height:1.6;color:var(--c-ink-50);font-style:italic;}
.err__box p a{color:var(--c-green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-style:normal;}
/* ============================================================
9. PMPRO · Login · Recuperación · Checkout · Niveles
Viste los shortcodes [pmpro_login], [pmpro_checkout] y
[pmpro_levels] con el sistema visual v0.4. NO toca la
funcionalidad — solo aspecto. Clases reales de PMPro 3.7.3.
============================================================ */
/* — Contenedor general PMPro ———————————————————— */
.pmpro{
max-width:var(--col-prose);
margin:48px auto;
padding:0 22px;
font-family:var(--f-sans);
}
.pmpro_section{margin-bottom:28px;}
/* — Card (envoltorio editorial con tic-corners) ——————— */
.pmpro_card{
position:relative;
background:var(--c-paper);
border:1px solid var(--c-border);
border-radius:var(--r-card);
padding:36px 34px;
box-shadow:var(--sh-1);
}
.pmpro_card + .pmpro_card{margin-top:22px;}
.pmpro_card_content{padding:0;}
/* — Títulos de sección ——————————————————————— */
.pmpro_card_title,
.pmpro_form_heading{
font-family:var(--f-serif);
font-size:var(--t-h3);
font-weight:600;
letter-spacing:-0.015em;
color:var(--c-ink);
margin-bottom:18px;
}
.pmpro_form_legend{padding:0;margin:0;border:0;}
/* — Campos de formulario ——————————————————————— */
.pmpro_form_fields{display:block;}
.pmpro_form_field{margin-bottom:18px;}
/* layout de 2 columnas (password+confirm, email+confirm) */
.pmpro_cols-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
@media(max-width:560px){
.pmpro_cols-2{grid-template-columns:1fr;}
}
/* — Labels ——————————————————————————————— */
.pmpro_form_label,
.login-username label,
.login-password label{
display:block;
font-family:var(--f-mono);
font-size:var(--t-meta);
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--c-ink-50);
margin-bottom:7px;
font-weight:500;
}
.pmpro_asterisk abbr{color:var(--c-rup);text-decoration:none;border:0;}
/* — Inputs ——————————————————————————————— */
.pmpro_form_input,
.pmpro input.input,
.pmpro input[type="text"],
.pmpro input[type="email"],
.pmpro input[type="password"],
.pmpro select{
width:100%;
font-family:var(--f-sans);
font-size:var(--t-body);
color:var(--c-ink);
background:var(--c-bg);
border:1.5px solid var(--c-border);
border-radius:var(--r-ui);
padding:11px 14px;
transition:border-color 150ms,box-shadow 150ms;
}
.pmpro_form_input:focus,
.pmpro input:focus,
.pmpro select:focus{
outline:none;
border-color:var(--c-green);
box-shadow:0 0 0 3px var(--c-green-l);
}
/* — Botones (mapean a la familia .ma-btn) ——————————— */
.pmpro_btn,
.pmpro input[type="submit"],
.pmpro .button-primary{
font-family:var(--f-sans);
font-size:15px;
font-weight:600;
padding:13px 28px;
border-radius:var(--r-ui);
border:1.5px solid var(--c-green);
background:var(--c-green);
color:#fff;
cursor:pointer;
transition:all 180ms var(--ease-soft);
display:inline-flex;
align-items:center;
gap:8px;
text-decoration:none;
}
.pmpro_btn:hover,
.pmpro input[type="submit"]:hover,
.pmpro .button-primary:hover{
background:var(--c-green-d);
border-color:var(--c-green-d);
transform:translateY(-1px);
}
/* botón "plain" (mostrar contraseña) — discreto */
.pmpro_btn-plain,
.pmpro_btn.pmpro_btn-plain{
background:transparent;
border-color:transparent;
color:var(--c-ink-50);
padding:6px 0;
font-size:var(--t-body-s);
}
.pmpro_btn-plain:hover{
background:transparent;
color:var(--c-green);
transform:none;
}
/* botón submit a ancho completo en login/checkout */
.login-submit input[type="submit"],
.pmpro_form_submit input[type="submit"],
.pmpro_btn-submit,
.pmpro_btn-submit-checkout{
width:100%;
justify-content:center;
}
/* — Login: párrafos de WP (.login-*) ————————————— */
.login-username,
.login-password,
.login-remember,
.login-submit{margin-bottom:18px;}
.login-remember label{
display:flex;align-items:center;gap:8px;
font-family:var(--f-sans);font-size:var(--t-body-s);
color:var(--c-ink-70);text-transform:none;letter-spacing:0;
}
.login-remember input{width:auto;margin:0;}
/* — Acciones secundarias (enlaces "¿Ya tienes cuenta?") —— */
.pmpro_card_actions,
.pmpro_actions_nav{
margin-top:20px;
padding-top:18px;
border-top:1px solid var(--c-border);
font-size:var(--t-body-s);
color:var(--c-ink-50);
}
.pmpro_card_actions a,
.pmpro_actions_nav a{
color:var(--c-green);
font-weight:500;
}
.pmpro_card_actions a:hover,
.pmpro_actions_nav a:hover{text-decoration:underline;}
/* — Información de nivel/precio en checkout ——————————— */
.pmpro_level_name_text{font-size:var(--t-body);color:var(--c-ink-70);margin-bottom:8px;}
.pmpro_level_name_text strong{color:var(--c-green);}
.pmpro_level_description_text{font-size:var(--t-body-s);color:var(--c-ink-50);margin-bottom:12px;}
#pmpro_level_cost .pmpro_level_cost_text{
font-family:var(--f-serif);font-size:18px;color:var(--c-ink);
}
.pmpro_level_cost_text strong{color:var(--c-green);}
/* — Mensajes ———————————————————————————————— */
.pmpro_message{
border-radius:var(--r-ui);
padding:13px 16px;
margin-bottom:20px;
font-size:var(--t-body-s);
}
.pmpro_message.pmpro_error{background:var(--c-rup-l);color:var(--c-rup);}
.pmpro_message.pmpro_success{background:var(--c-green-l);color:var(--c-green);}
/* — Tabla de NIVELES ([pmpro_levels]) ———————————————— */
table.pmpro_levels_table{
width:100%;
border-collapse:collapse;
font-family:var(--f-sans);
background:var(--c-paper);
}
table.pmpro_levels_table thead th{
font-family:var(--f-mono);
font-size:var(--t-meta);
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--c-ink-50);
text-align:left;
padding:14px 16px;
border-bottom:2px solid var(--c-border);
}
table.pmpro_levels_table tbody th,
table.pmpro_levels_table tbody td{
padding:18px 16px;
border-bottom:1px solid var(--c-border);
color:var(--c-ink);
vertical-align:middle;
}
table.pmpro_levels_table tbody th{
font-family:var(--f-serif);
font-size:19px;
font-weight:600;
color:var(--c-ink);
}
.pmpro_level-price strong{color:var(--c-green);font-weight:600;}
.pmpro_btn-select{
background:var(--c-green);
color:#fff;
border-color:var(--c-green);
white-space:nowrap;
}
/* — Toggle de contraseña: icono ojo ———————————————— */
.pmpro_form_field-password-toggle{margin-top:6px;}
.pmpro_icon-eye svg{width:16px;height:16px;}
/* — Ocultar elementos de pago (nivel gratuito) —————————
PMPro ya los pone display:none, reforzamos por si acaso. */
#pmpro_billing_address_fields[style*="none"]{display:none !important;}
/* ============================================================
10. BLOQUE "¿Y A TI?" v0.4
Reestiliza .ma-y-a-ti al sistema v0.4 (verde editorial).
Sustituye al .ma-y-a-ti viejo (dorado + caja con emoji-título)
que vive en style-legacy.css y que hay que ELIMINAR de allí.
El render de single.php NO cambia: sigue usando .ma-y-a-ti,
.ma-y-a-ti__title, .ma-y-a-ti__icon, .ma-y-a-ti__body.
Los emojis del CONTENIDO (🛒 Compras, 🏠 Hipoteca…) que rellena
el pipeline n8n se respetan como ancla visual de cada .
============================================================ */
.ma-y-a-ti{
position:relative;
margin:40px 0;
padding:32px 32px 28px;
background:var(--c-green-l);
border-left:4px solid var(--c-green);
border-radius:0 var(--r-card) var(--r-card) 0;
}
.ma-y-a-ti__title{
margin:0 0 22px;
font-family:var(--f-mono);
font-size:13px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--c-green);
font-weight:600;
display:inline-flex;
align-items:center;
gap:10px;
}
/* el icono 💥 del título viejo se sustituye por un filete editorial */
.ma-y-a-ti__icon{
font-size:0; /* oculta el emoji 💥 del título sin tocar el PHP */
}
.ma-y-a-ti__icon::before{
content:"——";
font-size:13px;
color:var(--c-green);
letter-spacing:-0.05em;
}
.ma-y-a-ti__body p{
font-family:var(--f-serif);
font-size:17px;
line-height:1.6;
color:var(--c-ink-70);
margin:0 0 18px;
}
.ma-y-a-ti__body p strong{color:var(--c-ink);font-weight:600;}
.ma-y-a-ti__body ul{
list-style:none;
display:flex;
flex-direction:column;
gap:16px;
margin:0;
padding:0;
}
.ma-y-a-ti__body li{
font-family:var(--f-serif);
font-size:17px;
line-height:1.55;
color:var(--c-ink-70);
padding-left:18px;
border-left:2px solid var(--c-green-l);
}
/* el de cada item (🛒 Compras:) destaca como label */
.ma-y-a-ti__body li strong{
color:var(--c-ink);
font-weight:600;
font-style:normal;
}
@media(max-width:640px){
.ma-y-a-ti{padding:24px 22px 20px;margin:32px 0;}
.ma-y-a-ti__body p,.ma-y-a-ti__body li{font-size:16px;}
}
/* Sistema de láminas — chip en .ma-single__meta */
.ma-single__lamina{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--c-ink-50);
font-weight:500;
}
/* ============================================================
12. RESUMEN SEMANAL v0.4 · single-resumen.php
Estructura lineal: claves + cuerpo editorial + láminas de la
semana + navegación + cierre. Paywall free/premium activo.
============================================================ */
/* — Cabecera del resumen — */
.r-header{padding:48px 0 8px;}
.r-header__inner{max-width:var(--col-prose);margin:0 auto;padding:0 48px;}
.r-header__title{
font-family:var(--f-serif);font-weight:600;
font-size:clamp(30px,5vw,44px);line-height:1.08;letter-spacing:-0.025em;
color:var(--c-ink);margin:14px 0 12px;
}
.r-header__title em{font-style:italic;color:var(--c-green);font-weight:600;}
.r-header__subtitle{
font-family:var(--f-serif);font-size:19px;line-height:1.5;
color:var(--c-ink-70);max-width:60ch;
}
/* — Claves de la semana (caja destacada, lista numerada) — */
.r-claves{padding:32px 0 24px;}
.r-claves__inner{max-width:var(--col-prose);margin:0 auto;padding:0 48px;}
.r-claves__box{
background:var(--c-paper);border:1px solid var(--c-border);border-radius:var(--r-card);
padding:32px 36px 28px;position:relative;box-shadow:var(--sh-1);
}
.r-claves__box .ma-eyebrow{margin-bottom:18px;}
.r-claves__list{list-style:none;display:flex;flex-direction:column;gap:0;margin:0;padding:0;}
.r-claves__list li{
display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
padding:14px 0;border-bottom:1px dashed var(--c-border);
}
.r-claves__list li:last-child{border-bottom:none;}
.r-claves__num{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-0.02em;color:var(--c-green);}
.r-claves__text{font-family:var(--f-sans);font-size:15px;line-height:1.55;color:var(--c-ink-70);}
.r-claves__text strong{color:var(--c-ink);font-weight:600;}
@media(max-width:640px){.r-claves__box{padding:24px 22px;}.r-claves__list li{grid-template-columns:32px 1fr;gap:14px;}.r-claves__num{font-size:20px;}}
/* — Cuerpo editorial (secciones de prosa) — */
.r-body{padding:32px 0 40px;}
.r-body__inner{max-width:var(--col-prose);margin:0 auto;padding:0 48px;}
.r-body__section + .r-body__section{margin-top:48px;padding-top:32px;border-top:1px solid var(--c-border);}
.r-body__section .ma-eyebrow{margin-bottom:10px;}
.r-body__section h3{font-family:var(--f-serif);font-weight:500;font-size:var(--t-h3);line-height:1.12;letter-spacing:-0.022em;color:var(--c-ink);margin:8px 0 18px;}
.r-body__section h3 em{font-style:italic;color:var(--c-green);font-weight:500;}
.r-body__prose{font-family:var(--f-serif);font-size:17px;line-height:1.7;color:var(--c-ink-70);}
.r-body__prose p+p{margin-top:16px;}
.r-body__prose p{margin:0 0 16px;}
.r-body__prose strong{color:var(--c-ink);font-weight:600;}
.r-body__prose em{font-style:italic;}
.r-body__prose ul{margin:14px 0;padding-left:22px;}
.r-body__prose li{margin-bottom:8px;}
.r-body__prose blockquote{
margin:22px 0;padding:4px 0 4px 22px;border-left:2px solid var(--c-green);
font-family:var(--f-serif);font-style:italic;font-size:18px;line-height:1.55;color:var(--c-ink);
}
/* — Subsecciones (mercados, escenarios, impacto con sub-bloques) — */
.r-body__sub{margin-top:22px;}
.r-body__sub-label{
font-family:var(--f-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
color:var(--c-green);font-weight:600;margin-bottom:8px;
}
/* — Paywall premium (reutiliza la lógica visual de las noticias) — */
.r-premium-gate{
position:relative;margin-top:40px;padding:36px 32px;
background:var(--c-green-l);border:1px solid var(--c-border);border-radius:var(--r-card);
text-align:center;
}
.r-premium-gate__label{
font-family:var(--f-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
color:var(--c-green);font-weight:600;margin-bottom:10px;
}
.r-premium-gate__title{
font-family:var(--f-serif);font-size:22px;font-weight:600;color:var(--c-ink);margin-bottom:10px;
}
.r-premium-gate__text{
font-family:var(--f-sans);font-size:15px;line-height:1.6;color:var(--c-ink-70);
max-width:48ch;margin:0 auto 20px;
}
/* — Láminas de la semana — */
.r-related{padding:32px 0 32px;border-top:1px solid var(--c-border);}
.r-related__inner{max-width:var(--col-prose);margin:0 auto;padding:0 48px;}
.r-related .ma-eyebrow{margin-bottom:10px;}
.r-related h3{font-family:var(--f-serif);font-weight:500;font-size:var(--t-h3);letter-spacing:-0.022em;line-height:1.1;color:var(--c-ink);margin:8px 0 22px;}
.r-related__list{list-style:none;display:flex;flex-direction:column;gap:0;margin:0;padding:0;}
.r-related__item{
display:grid;grid-template-columns:140px 80px 1fr 110px;
align-items:center;gap:18px;
padding:18px 0;border-bottom:1px solid var(--c-border);
color:inherit;text-decoration:none;
transition:background 150ms;
}
.r-related__item:last-child{border-bottom:none;}
.r-related__item:hover{background:rgba(17,24,39,0.025);}
.r-related__date{font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-ink-30);}
.r-related__title{font-family:var(--f-serif);font-size:16.5px;font-weight:500;line-height:1.3;letter-spacing:-0.01em;color:var(--c-ink);}
.r-related__lamina{font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-ink-30);text-align:right;}
@media(max-width:780px){
.r-related__item{grid-template-columns:1fr;gap:6px;padding:18px 0;}
.r-related__date{order:1;}.r-related__class{order:0;}
.r-related__title{order:2;font-size:18px;}.r-related__lamina{order:3;text-align:left;}
}
/* — Navegación entre ediciones — */
.r-nav{padding:32px 0;border-top:1px solid var(--c-border);}
.r-nav__inner{
max-width:var(--col-prose);margin:0 auto;padding:0 48px;
display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
font-family:var(--f-mono);font-size:var(--t-meta);letter-spacing:0.14em;text-transform:uppercase;
}
.r-nav__prev,.r-nav__next{color:var(--c-green);font-weight:600;text-decoration:none;}
.r-nav__prev:hover,.r-nav__next:hover{color:var(--c-green-d);}
.r-nav__disabled{color:var(--c-ink-30);}
/* — CTA de cierre — */
.r-close{padding:64px 0 88px;border-top:1px solid var(--c-border);text-align:center;}
.r-close__inner{max-width:var(--col-prose);margin:0 auto;padding:0 48px;}
.r-close h3{font-family:var(--f-serif);font-weight:500;font-size:var(--t-h3);letter-spacing:-0.022em;line-height:1.05;color:var(--c-ink);margin:14px 0;}
.r-close h3 em{font-style:italic;color:var(--c-green);font-weight:500;}
.r-close__lede{font-family:var(--f-serif);font-size:16.5px;line-height:1.6;color:var(--c-ink-70);max-width:54ch;margin:0 auto 24px;}
.r-close__note{margin-top:18px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-ink-30);}
@media(max-width:768px){
.r-header__inner,.r-claves__inner,.r-body__inner,.r-related__inner,.r-nav__inner,.r-close__inner{padding:0 22px;}
}
/* ============================================================
13. HOMEPAGE v0.4 (5A-1) · hero · ticker · noticias · cta
============================================================ */
/* — Layout base home — */
.hp .wrap{max-width:1080px;margin:0 auto;padding:0 32px;}
@media(max-width:768px){.hp .wrap{padding:0 22px;}}
.hero{
padding:56px 0 72px;
position:relative;
}
.hero-masthead{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:32px;flex-wrap:wrap;gap:12px;
min-height:32px;
}
.hero-masthead__brand{
font-family:var(--f-serif);font-weight:500;font-style:italic;
font-size:22px;letter-spacing:-0.015em;color:var(--c-ink);
}
.hero-masthead__brand em{color:var(--c-green);}
/* Atlas plate */
.ma-plate{
background:var(--c-paper);
border:1px solid var(--c-border);
border-radius:var(--r-card);
padding:28px 32px 26px;
position:relative;
box-shadow:var(--sh-1);
display:flex;flex-direction:column;
}
@media(max-width:640px){.ma-plate{padding:32px 24px 28px;}}
.ma-plate .ma-tic{color:var(--c-ink);}
.ma-plate__kicker{
font-family:var(--f-mono);font-size:var(--t-micro);
letter-spacing:0.16em;text-transform:uppercase;color:var(--c-ink-30);
display:flex;align-items:center;flex-wrap:wrap;gap:10px;
margin-bottom:22px;
}
.ma-plate__kicker .lamina{color:var(--c-ink-50);font-weight:600;}
.ma-plate__kicker .coords{color:var(--c-gold);}
.ma-plate__kicker .sep{color:var(--c-border);}
.ma-plate__pill-row{display:flex;align-items:center;gap:10px;margin-bottom:22px;}
.ma-plate__title{
font-family:var(--f-serif);font-weight:500;
font-size:clamp(22px,2.3vw,30px);line-height:1.12;letter-spacing:-0.022em;
color:var(--c-ink);margin:0 0 12px;max-width:none;
display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;
overflow:hidden;
}
.ma-plate__title em{font-style:italic;color:var(--c-green);font-weight:500;}
.ma-plate__rule{margin:24px 0 22px;}
.ma-plate__yati-eyebrow{margin-bottom:14px;}
.ma-plate__yati-list{
list-style:none;display:flex;flex-wrap:wrap;gap:14px 36px;margin:0;
}
.ma-plate__yati-list li{
font-family:var(--f-serif);font-size:19px;font-weight:400;
color:var(--c-ink);letter-spacing:-0.005em;line-height:1.2;
display:inline-flex;align-items:center;gap:12px;
}
.ma-plate__yati-list .bullet{
width:16px;height:16px;flex-shrink:0;color:var(--c-gold);
}
.ma-plate__foot{
margin-top:32px;padding-top:22px;
border-top:1px solid var(--c-border-s);
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:14px;
}
.ma-plate__foot-meta{
font-family:var(--f-mono);font-size:var(--t-micro);
letter-spacing:0.16em;text-transform:uppercase;color:var(--c-ink-30);
}
/* Editorial meta-row bajo la lámina */
.hero-meta-row{
margin-top:24px;
display:flex;align-items:center;justify-content:space-between;
gap:20px;flex-wrap:wrap;
font-family:var(--f-mono);font-size:var(--t-meta);
letter-spacing:0.14em;text-transform:uppercase;color:var(--c-ink-30);
}
.hero-meta-row__filters{display:flex;align-items:center;gap:18px;}
.hero-meta-row__filter{display:inline-flex;align-items:center;gap:7px;}
.hero-meta-row__stripe{width:14px;height:3px;border-radius:2px;}
.hero-meta-row__stripe--rup{background:var(--c-rup);}
.hero-meta-row__stripe--seg{background:var(--c-seg);}
.hero-tic{
position:absolute;width:16px;height:16px;
pointer-events:none;color:var(--c-ink);
}
.hero-tic--tl{top:-1px;left:-1px;}
.hero-tic--tr{top:-1px;right:-1px;transform:scaleX(-1);}
.hero-tic--bl{bottom:-1px;left:-1px;transform:scaleY(-1);}
.hero-tic--br{bottom:-1px;right:-1px;transform:scale(-1,-1);}
.hero-tic line{
stroke-dasharray:9;stroke-dashoffset:9;
animation:heroTicDraw 400ms var(--ease-out) forwards;
}
.hero-tic--tl line{animation-delay:0ms;}
.hero-tic--tr line{animation-delay:100ms;}
.hero-tic--br line{animation-delay:200ms;}
.hero-tic--bl line{animation-delay:300ms;}
@keyframes heroTicDraw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){
.hero-tic line{stroke-dashoffset:0;animation:none;}
}
/* ============================================================
TICKER v2 · Mejora 7 (visual) · REEMPLAZA el bloque .ticker
de la sección 13. Añade: precio, gradiente de intensidad por
magnitud (lvl-0..3), animación más fluida.
============================================================ */
.ticker{
background:var(--c-dark);
overflow:hidden;
position:relative;
height:46px;
display:flex;align-items:center;
max-width:100vw;
}
.ticker::before,.ticker::after{
content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--c-dark),transparent);}
.ticker::after{right:0;background:linear-gradient(90deg,transparent,var(--c-dark));}
/* Animación más fluida: 44s (antes 32s), velocidad uniforme, sin saltos. */
.ticker__track{display:flex;animation:tickerScroll 44s linear infinite;width:max-content;will-change:transform;}
.ticker__track:hover{animation-play-state:paused;}
@keyframes tickerScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.ticker__item{
display:inline-flex;align-items:center;gap:9px;padding:0 24px;
border-right:1px solid rgba(255,255,255,0.05);white-space:nowrap;height:46px;
position:relative;
transition:background 300ms ease;
}
/* Gradiente de intensidad por magnitud — el fondo se tiñe sutilmente.
lvl-0 plano (sin tinte), lvl-1 leve, lvl-2 medio, lvl-3 fuerte.
Verde para subidas (is-up), rojo para bajadas (is-down). */
.ticker__item.is-up.lvl-1{background:rgba(74,222,128,0.06);}
.ticker__item.is-up.lvl-2{background:rgba(74,222,128,0.11);}
.ticker__item.is-up.lvl-3{background:rgba(74,222,128,0.18);}
.ticker__item.is-down.lvl-1{background:rgba(248,113,113,0.06);}
.ticker__item.is-down.lvl-2{background:rgba(248,113,113,0.11);}
.ticker__item.is-down.lvl-3{background:rgba(248,113,113,0.18);}
.ticker__flag{font-size:14px;line-height:1;}
.ticker__name{
font-size:11px;font-weight:500;color:rgba(255,255,255,0.55);
letter-spacing:0.06em;text-transform:uppercase;
}
.ticker__price{
font-family:var(--f-mono);font-size:12px;font-weight:400;
color:rgba(255,255,255,0.78);letter-spacing:-0.01em;
}
.ticker__pct{font-family:var(--f-mono);font-size:13px;font-weight:600;letter-spacing:-0.01em;}
.ticker__arrow{font-size:9px;line-height:1;}
.ticker .up{color:#4ade80;}
.ticker .down{color:#f87171;}
/* Móvil: compacto (heredado del fix de ayer + ajuste) */
@media (max-width:600px){
.ticker__item{padding:0 16px;gap:7px;}
.ticker__name{font-size:10px;}
.ticker__price{font-size:11px;}
.ticker__pct{font-size:12px;}
.ticker::before,.ticker::after{width:32px;}
}
.ma-newscard{
background:var(--c-bg);
border:1px solid var(--c-border);
border-radius:var(--r-card);
overflow:hidden;
display:flex;flex-direction:column;
position:relative;
}
.ma-newscard__stripe{
position:absolute;top:0;left:0;right:0;
height:3px;z-index:1;
transition:height var(--dur-fast) var(--ease-soft);
}
.ma-newscard:hover .ma-newscard__stripe{height:6px;}
.ma-newscard__stripe--rup{background:var(--c-rup);}
.ma-newscard__stripe--seg{background:var(--c-seg);}
.ma-newscard__body{padding:25px 22px 18px;flex:1;display:flex;flex-direction:column;}
.ma-newscard__meta{
display:flex;align-items:center;justify-content:space-between;
gap:10px;margin-bottom:14px;
}
.ma-newscard__date{
font-family:var(--f-mono);font-size:var(--t-micro);
color:var(--c-ink-30);letter-spacing:0.06em;
}
.ma-newscard__title{
font-family:var(--f-serif);font-weight:500;font-size:18px;
line-height:1.22;letter-spacing:-0.012em;color:var(--c-ink);
margin-bottom:8px;
transition:color var(--dur-fast) var(--ease-soft);
}
.ma-newscard--rup:hover .ma-newscard__title{color:var(--c-rup-d);}
.ma-newscard--seg:hover .ma-newscard__title{color:var(--c-seg-d);}
.ma-newscard:not(.ma-newscard--rup):not(.ma-newscard--seg):hover .ma-newscard__title{color:var(--c-green);}
@media (prefers-reduced-motion: reduce){
.ma-newscard__stripe,.ma-newscard__title{transition:none;}
}
.ma-newscard__excerpt{
font-size:13.5px;line-height:1.6;color:var(--c-ink-50);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ma-newscard__foot{
margin-top:14px;padding-top:12px;border-top:1px solid var(--c-border-s);
display:flex;align-items:center;justify-content:space-between;
font-family:var(--f-mono);font-size:var(--t-micro);
color:var(--c-ink-30);letter-spacing:0.06em;
}
/* — Ajustes y complementos 5A-1 — */
.ma-plate__kicker .coords{color:var(--c-ink-50);}
/* — Token --c-dark fallback (el ticker lo usa; por si no está en :root) — */
:root{--c-dark:#1A1A2E;}
/* ============================================================
15. MEMBRESÍA v0.4 (5B-1) · page-niveles-de-membresia.php
Híbrida beta: marketing rico + tabla [pmpro_levels] embebida.
Dorado → verde por norma beta.
============================================================ */
.mb .wrap{max-width:1080px;margin:0 auto;padding:0 32px;}
@media(max-width:768px){.mb .wrap{padding:0 22px;}}
/* — HERO — */
.mb-hero{padding:64px 0 48px;text-align:center;border-bottom:1px solid var(--c-border);}
.mb-hero__title{font-family:var(--f-serif);font-weight:600;font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-0.03em;color:var(--c-ink);margin:16px 0 16px;}
.mb-hero__title em{font-style:italic;color:var(--c-green);font-weight:600;}
.mb-hero__sub{font-family:var(--f-serif);font-size:18px;line-height:1.5;color:var(--c-ink-70);max-width:54ch;margin:0 auto 32px;}
/* — Precio — */
.mb-precio{display:inline-flex;flex-direction:column;align-items:center;margin-bottom:32px;}
.mb-precio__row{display:flex;align-items:baseline;gap:6px;}
.mb-precio__moneda{font-family:var(--f-mono);font-size:26px;color:var(--c-ink-50);}
.mb-precio__num{font-family:var(--f-serif);font-size:72px;font-weight:600;line-height:1;letter-spacing:-0.04em;color:var(--c-ink);}
.mb-precio__dec{font-size:0.5em;}
.mb-precio__periodo{font-family:var(--f-mono);font-size:15px;color:var(--c-ink-30);letter-spacing:0.06em;}
.mb-precio__nota{font-family:var(--f-mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--c-ink-50);margin-top:10px;}
.mb-precio__nota strong{color:var(--c-green);font-weight:600;}
.mb-hero__cta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
/* — BENEFICIOS — */
.mb-beneficios{padding:72px 0;background:var(--c-paper);border-bottom:1px solid var(--c-border);}
.mb-beneficios__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;}
@media(max-width:860px){.mb-beneficios__grid{grid-template-columns:1fr;gap:36px;}}
.mb-beneficios__intro h2{font-family:var(--f-serif);font-weight:500;font-size:30px;line-height:1.12;letter-spacing:-0.022em;color:var(--c-ink);margin:10px 0 16px;}
.mb-beneficios__intro h2 em{font-style:italic;color:var(--c-green);font-weight:500;}
.mb-beneficios__intro p{font-family:var(--f-serif);font-size:16px;line-height:1.6;color:var(--c-ink-70);}
.mb-beneficios__lista{display:flex;flex-direction:column;gap:4px;}
.mb-beneficio{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;padding:18px 0;border-bottom:1px dashed var(--c-border);}
.mb-beneficio:last-child{border-bottom:none;}
.mb-beneficio__icon{font-size:24px;line-height:1.2;text-align:center;}
.mb-beneficio__title{font-family:var(--f-sans);font-weight:600;font-size:16px;color:var(--c-ink);margin-bottom:5px;}
.mb-beneficio__desc{font-family:var(--f-sans);font-size:14px;line-height:1.55;color:var(--c-ink-50);}
/* — COMPARATIVA Gratis vs Premium — */
.mb-diferencia{padding:72px 0;border-bottom:1px solid var(--c-border);}
.mb-diferencia__inner{max-width:680px;margin:0 auto;text-align:center;}
.mb-diferencia__inner h2{font-family:var(--f-serif);font-weight:500;font-size:30px;letter-spacing:-0.022em;color:var(--c-ink);}
.mb-diferencia__inner h2 em{font-style:italic;color:var(--c-green);font-weight:500;}
.mb-diferencia__sub{font-family:var(--f-serif);font-size:15.5px;line-height:1.6;color:var(--c-ink-70);max-width:48ch;margin:12px auto 32px;}
.mb-tabla{width:100%;border-collapse:collapse;text-align:left;background:var(--c-paper);border:1px solid var(--c-border);border-radius:var(--r-card);overflow:hidden;}
.mb-tabla th{font-family:var(--f-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--c-ink-50);font-weight:600;padding:16px 20px;border-bottom:1px solid var(--c-border);background:var(--c-bg);}
.mb-tabla th:nth-child(2),.mb-tabla th:nth-child(3){text-align:center;width:110px;}
.mb-tabla td{font-family:var(--f-sans);font-size:14.5px;color:var(--c-ink-70);padding:14px 20px;border-bottom:1px solid var(--c-border);}
.mb-tabla tr:last-child td{border-bottom:none;}
.mb-tabla td:nth-child(2),.mb-tabla td:nth-child(3){text-align:center;}
.mb-check--yes{color:var(--c-green);font-weight:700;font-size:16px;}
.mb-check--no{color:var(--c-ink-30);}
.mb-check--star{color:var(--c-green);font-size:15px;}
/* — TABLA PMPRO embebida — */
.mb-pmpro{padding:72px 0;background:var(--c-paper);border-bottom:1px solid var(--c-border);text-align:center;}
.mb-pmpro__title{font-family:var(--f-serif);font-weight:500;font-size:30px;letter-spacing:-0.022em;color:var(--c-ink);margin:10px 0 12px;}
.mb-pmpro__title em{font-style:italic;color:var(--c-green);font-weight:500;}
.mb-pmpro__sub{font-family:var(--f-serif);font-size:15.5px;color:var(--c-ink-70);max-width:46ch;margin:0 auto 28px;}
.mb-pmpro__levels{max-width:760px;margin:0 auto;}
/* la tabla pmpro hereda los estilos de la sección 9 (Bloque 3); aquí solo el contenedor */
/* — CTA FINAL — */
.mb-cta{padding:72px 0 96px;text-align:center;}
.mb-cta__inner{max-width:640px;margin:0 auto;}
.mb-cta__title{font-family:var(--f-serif);font-weight:500;font-size:32px;letter-spacing:-0.022em;line-height:1.1;color:var(--c-ink);margin:14px 0;}
.mb-cta__title em{font-style:italic;color:var(--c-green);font-weight:500;}
.mb-cta__lede{font-family:var(--f-serif);font-size:16.5px;line-height:1.6;color:var(--c-ink-70);max-width:50ch;margin:0 auto 24px;}
.mb-cta__note{margin-top:18px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-ink-30);}
/* ============================================================
16. CUENTA v0.4 (5B-2) · panel con sidebar + shortcodes PMPro
Wrapper .ma-account compartido por las 5 páginas de cuenta.
============================================================ */
.ma-account{padding:48px 0 80px;}
.ma-account .wrap{max-width:1080px;margin:0 auto;padding:0 32px;}
@media(max-width:768px){.ma-account .wrap{padding:0 22px;}}
.ma-account__grid{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start;}
@media(max-width:860px){.ma-account__grid{grid-template-columns:1fr;gap:28px;}}
/* — Sidebar — */
.ma-account__sidebar{
background:var(--c-paper);border:1px solid var(--c-border);border-radius:var(--r-card);
padding:24px 20px;position:sticky;top:24px;
}
@media(max-width:860px){.ma-account__sidebar{position:static;}}
.ma-account__head{padding-bottom:18px;border-bottom:1px solid var(--c-border);margin-bottom:16px;}
.ma-account__name{font-family:var(--f-serif);font-weight:600;font-size:18px;color:var(--c-ink);letter-spacing:-0.01em;}
.ma-account__email{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-50);word-break:break-all;display:block;margin-top:4px;}
.ma-account__badge{
display:inline-flex;align-items:center;gap:6px;margin-top:12px;
font-family:var(--f-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;
color:var(--c-green);background:var(--c-green-l);padding:4px 10px;border-radius:100px;
}
.ma-account__dot{width:6px;height:6px;border-radius:50%;background:var(--c-green);}
.ma-account__nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.ma-account__link{
display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-ui);
font-family:var(--f-sans);font-size:14px;font-weight:500;color:var(--c-ink-70);
text-decoration:none;transition:background 150ms,color 150ms;
}
.ma-account__link svg{color:var(--c-ink-30);flex-shrink:0;transition:color 150ms;}
.ma-account__link:hover{background:var(--c-bg);color:var(--c-ink);}
.ma-account__link:hover svg{color:var(--c-green);}
.ma-account__link.is-active{background:var(--c-green);color:#fff;}
.ma-account__link.is-active svg{color:#fff;}
.ma-account__link--danger{color:var(--c-rup);}
.ma-account__link--danger svg{color:var(--c-rup);}
.ma-account__link--danger:hover{background:rgba(153,27,27,0.07);color:var(--c-rup);}
.ma-account__link--danger:hover svg{color:var(--c-rup);}
.ma-account__link--danger.is-active{background:var(--c-rup);color:#fff;}
.ma-account__link--danger.is-active svg{color:#fff;}
.ma-account__divider{height:1px;background:var(--c-border);margin:12px 0;list-style:none;}
/* — Main — */
.ma-account__main{min-width:0;}
.ma-account__page-header{margin-bottom:28px;}
.ma-account__page-header h1{font-family:var(--f-serif);font-weight:600;font-size:32px;letter-spacing:-0.025em;color:var(--c-ink);margin-bottom:6px;}
.ma-account__page-header p{font-family:var(--f-serif);font-size:16px;color:var(--c-ink-70);}
/* — Contenido: ocultar la navegación interna de PMPro (chocaría con nuestro sidebar) — */
.ma-account__content .pmpro_actions_nav{display:none;}
/* el contenido PMPro (forms, cards, tablas) hereda los estilos de la sección 9.
Aquí solo aseguramos que encaje en el contenedor del panel. */
.ma-account__content .pmpro_account,
.ma-account__content .pmpro_section{margin-bottom:24px;}
.ma-account__content .pmpro_card{
background:var(--c-paper);border:1px solid var(--c-border);border-radius:var(--r-card);
}
/* mensaje cuando una sección está vacía (beta: facturación/pedidos) */
.ma-account__content .pmpro_message{
background:var(--c-bg);border:1px dashed var(--c-border);border-radius:var(--r-ui);
padding:18px 20px;font-family:var(--f-sans);font-size:14px;color:var(--c-ink-50);
}
/* ============================================================
FIX MÓVIL · ticker responsive + anti-overflow horizontal global
Causa raíz: .ticker__track ~847px disparaba scroll horizontal
en móvil, encogiendo toda la página.
============================================================ */
/* Seguro anti-overflow horizontal a nivel de página.
Evita que CUALQUIER elemento ancho (ticker, tablas) rompa el layout móvil. */
html, body { overflow-x: hidden; max-width: 100%; }
/* El ticker: reforzar que su desbordamiento queda contenido. */
.ticker { overflow: hidden; max-width: 100vw; }
.ticker__track { max-width: none; } /* el track puede ser ancho; el padre lo recorta */
/* Ticker en móvil: items más compactos para que quepan más en pantalla
antes del recorte (mejora la legibilidad de la cinta). */
@media (max-width: 600px) {
.ticker__item { padding: 0 16px; gap: 7px; }
.ticker__name { font-size: 10px; }
.ticker__pct { font-size: 12px; }
.ticker::before, .ticker::after { width: 32px; } /* gradientes laterales más estrechos */
}
/* ============================================================
MENÚ MÓVIL · hamburguesa + panel desplegable
Activado ≤768px. Desktop: el botón hamburguesa está oculto.
============================================================ */
.site-nav__toggle{display:none;}
.site-nav__panel{display:none;}
@media (max-width: 768px) {
.site-nav__toggle{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:4px;width:40px;height:40px;
background:transparent;border:0;cursor:pointer;padding:0;
margin-left:auto;
}
.site-nav__toggle-line{
display:block;width:22px;height:2px;background:var(--c-ink);
transition:transform 220ms ease, opacity 180ms;
transform-origin:center;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-line:nth-child(1){
transform:translateY(6px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-line:nth-child(2){opacity:0;}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-line:nth-child(3){
transform:translateY(-6px) rotate(-45deg);
}
.site-nav__cta{display:none;}
.site-nav__panel{
display:block;
position:absolute;top:100%;left:0;right:0;
background:var(--c-paper);
border-bottom:1px solid var(--c-border);
box-shadow:0 8px 24px rgba(0,0,0,0.06);
padding:14px 22px 22px;
transform:translateY(-12px);opacity:0;pointer-events:none;
transition:transform 220ms ease, opacity 180ms;
}
.site-nav__panel.is-open{
transform:translateY(0);opacity:1;pointer-events:auto;
}
.site-nav__panel[hidden]{display:none;}
.site-nav__panel.is-open[hidden]{display:block;}
.site-nav__panel-links{
list-style:none;padding:0;margin:0 0 14px;
display:flex;flex-direction:column;gap:0;
}
.site-nav__panel-links a{
display:block;padding:14px 0;
font-family:var(--f-sans);font-size:16px;font-weight:500;
color:var(--c-ink);text-decoration:none;
border-bottom:1px solid var(--c-border-s);
transition:color 150ms;
}
.site-nav__panel-links a:hover{color:var(--c-green);}
.site-nav__panel-links li:last-child a{border-bottom:none;}
.site-nav__panel-cta{padding-top:8px;}
.site-nav__panel-cta .ma-btn{
width:100%;justify-content:center;display:flex;
}
body.site-nav-open{overflow:hidden;}
}
/* ============================================================
17. CALCULADORA LOCAL (Mejora 4) · .ma-calc
Dentro del bloque "¿Y a ti?" en single.php. 3 escenarios.
============================================================ */
.ma-calc{
position:relative;margin:32px 0 8px;padding:28px 30px;
background:var(--c-paper);border:1px solid var(--c-border);border-radius:var(--r-card);
opacity:0;transition:opacity 250ms;
}
.ma-calc.is-ready{opacity:1;}
.ma-calc__head{margin-bottom:18px;}
.ma-calc__title{font-family:var(--f-serif);font-weight:600;font-size:20px;line-height:1.2;color:var(--c-ink);margin-top:6px;}
.ma-calc__inputs{display:flex;flex-direction:column;gap:14px;margin-bottom:22px;}
.ma-calc__field{display:flex;flex-direction:column;gap:6px;}
.ma-calc__field label{font-family:var(--f-sans);font-size:13.5px;font-weight:500;color:var(--c-ink-70);}
.ma-calc__input{
font-family:var(--f-mono);font-size:16px;padding:11px 14px;
border:1.5px solid var(--c-border);border-radius:var(--r-ui);background:var(--c-bg);
color:var(--c-ink);width:100%;max-width:320px;transition:border-color 150ms;
}
.ma-calc__input:focus{outline:none;border-color:var(--c-green);}
.ma-calc__results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px;}
@media(max-width:560px){.ma-calc__results{grid-template-columns:1fr;}}
.ma-calc__result{
padding:16px 14px;border-radius:var(--r-ui);border:1px solid var(--c-border);
text-align:center;display:flex;flex-direction:column;gap:6px;
}
.ma-calc__result--up{background:rgba(22,101,52,0.05);border-color:rgba(22,101,52,0.2);}
.ma-calc__result--down{background:rgba(153,27,27,0.05);border-color:rgba(153,27,27,0.2);}
.ma-calc__result--neutral{background:var(--c-bg);}
.ma-calc__result-val{font-family:var(--f-serif);font-weight:600;font-size:26px;letter-spacing:-0.02em;line-height:1;}
.ma-calc__result--up .ma-calc__result-val{color:var(--c-green);}
.ma-calc__result--down .ma-calc__result-val{color:var(--c-rup);}
.ma-calc__result--neutral .ma-calc__result-val{color:var(--c-ink-70);}
.ma-calc__result-label{font-family:var(--f-sans);font-size:12px;line-height:1.35;color:var(--c-ink-50);}
.ma-calc__disclaimer{font-family:var(--f-mono);font-size:10.5px;line-height:1.55;color:var(--c-ink-50);letter-spacing:0.015em;border-top:1px solid var(--c-border);padding-top:14px;margin:0;}
/* Capa 1: banner de simulación educativa (legal CNMV) - prominente arriba de inputs */
.ma-calc__notice{
background:#FEF3C7;
border-left:4px solid #D97706;
color:#7C2D12;
padding:12px 16px;
margin:0 0 18px;
font-family:var(--f-sans);
font-size:13px;
line-height:1.55;
border-radius:6px;
}
.ma-calc__notice strong{font-weight:700;color:#7C2D12;}
@media (max-width:600px){
.ma-calc__notice{padding:10px 12px;font-size:12px;margin-bottom:14px;}
}
/* ============================================================
18. MINI-TARJETAS HISTÓRICAS (Mejora 5) · .ma-hist
Dentro de la lámina, tras la calculadora. Versión compacta.
============================================================ */
.ma-hist{
position:relative;margin:32px 0 8px;padding:28px 30px;
background:var(--c-paper);border:1px solid var(--c-border);border-radius:var(--r-card);
opacity:0;transition:opacity 250ms;
}
.ma-hist.is-ready{opacity:1;}
.ma-hist__head{margin-bottom:18px;}
.ma-hist__title{font-family:var(--f-serif);font-weight:600;font-size:20px;line-height:1.2;color:var(--c-ink);margin-top:6px;}
.ma-hist__sub{font-family:var(--f-sans);font-size:13.5px;color:var(--c-ink-50);margin-top:4px;}
.ma-hist__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px;}
.ma-hist__card{
display:block;padding:15px 16px;border-radius:var(--r-ui);
border:1px solid var(--c-border);border-left-width:3px;
background:var(--c-bg);text-decoration:none;transition:border-color 150ms,transform 150ms;
}
.ma-hist__card:hover{transform:translateY(-2px);border-color:var(--c-ink-30);}
/* Borde izquierdo según magnitud del episodio */
.ma-hist__card.lvl-5{border-left-color:var(--c-rup);}
.ma-hist__card.lvl-4{border-left-color:var(--c-rup);}
.ma-hist__card.lvl-3{border-left-color:var(--c-seg);}
.ma-hist__card.lvl-2{border-left-color:var(--c-ink-30);}
.ma-hist__card-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px;}
.ma-hist__fecha{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-50);letter-spacing:0.02em;}
.ma-hist__etiqueta{font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--c-ink-70);}
.ma-hist__titulo{font-family:var(--f-serif);font-size:14.5px;line-height:1.3;color:var(--c-ink);font-weight:600;margin-bottom:9px;}
.ma-hist__ind{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.ma-hist__ind-activo{font-family:var(--f-sans);font-size:12px;color:var(--c-ink-70);}
.ma-hist__ind-mag{font-family:var(--f-mono);font-size:12px;font-weight:600;}
.ma-hist__ind-mag.up{color:var(--c-green);}
.ma-hist__ind-mag.down{color:var(--c-rup);}
.ma-hist__ind-mag.neutral{color:var(--c-ink-50);}
.ma-hist__link{font-family:var(--f-sans);font-size:13px;font-weight:500;color:var(--c-green);text-decoration:none;}
.ma-hist__link:hover{text-decoration:underline;}
@media(max-width:560px){
.ma-hist__grid{grid-template-columns:1fr;}
}
/* ============================================================
19. MINI-TARJETA WIDGET RELACIONADO (Mejora 6A) · .ma-wlink
Tarjeta horizontal de enlace al widget en /analisis/.
Formato distinto a las mini-tarjetas (horizontal + flecha)
para no sentirse redundante con los históricos.
============================================================ */
.ma-wlink{margin:24px 0 8px;}
.ma-wlink__card{
display:flex;align-items:center;gap:18px;
padding:20px 24px;border-radius:var(--r-card);
background:var(--c-green-l);border:1px solid rgba(22,101,52,0.18);
text-decoration:none;transition:background 150ms,border-color 150ms,transform 150ms;
}
.ma-wlink__card:hover{
background:rgba(22,101,52,0.13);border-color:var(--c-green);transform:translateY(-2px);
}
.ma-wlink__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.ma-wlink__eyebrow{
font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:0.1em;
text-transform:uppercase;color:var(--c-green);
}
.ma-wlink__title{font-family:var(--f-serif);font-weight:600;font-size:18px;color:var(--c-ink);letter-spacing:-0.01em;}
.ma-wlink__desc{font-family:var(--f-sans);font-size:13.5px;line-height:1.4;color:var(--c-ink-70);}
.ma-wlink__arrow{
font-family:var(--f-sans);font-size:22px;color:var(--c-green);flex-shrink:0;
transition:transform 150ms;
}
.ma-wlink__card:hover .ma-wlink__arrow{transform:translateX(4px);}
@media(max-width:560px){
.ma-wlink__card{padding:16px 18px;gap:12px;}
.ma-wlink__title{font-size:16px;}
}
/* ============================================================
20. BARRA DE PROGRESO DE SCROLL (Sesión 1 §00)
CSS scroll-driven animation con fallback a JS si el navegador
no la soporta. Sin JavaScript en el camino preferente.
============================================================ */
.ma-scroll-progress{
position:fixed;top:0;left:0;width:100%;height:3px;
background:var(--c-border);z-index:9999;pointer-events:none;
}
.ma-scroll-progress__bar{
height:100%;width:0;background:var(--c-green);transform-origin:left center;
}
@supports (animation-timeline: scroll()){
.ma-scroll-progress__bar{
width:100%;transform:scaleX(0);
animation:ma-scroll-progress-grow linear both;
animation-timeline:scroll(root);
}
@keyframes ma-scroll-progress-grow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
}
/* ============================================================
21. NAV — sticky + sombra al hacer scroll + tagline (Sesión 1 §01)
Hereda estilos previos. Aquí solo añadimos sticky, sombra y tagline.
============================================================ */
.site-nav{position:sticky;top:3px;z-index:9998;background:var(--c-paper);transition:box-shadow 200ms ease,background-color 200ms ease;}
.site-nav.is-scrolled{box-shadow:0 1px 0 var(--c-border),0 6px 24px -16px rgba(17,24,39,0.15);}
.site-nav__tagline{
font-family:var(--f-sans);font-size:12px;color:var(--c-ink-50);font-style:italic;
margin-left:6px;letter-spacing:0.01em;
}
@media(max-width:600px){.site-nav__tagline{display:none;}}
/* ============================================================
22. HERO REDISEÑO (Sesión 1 §02)
2 columnas desktop · 1 columna mobile · gradiente animado · fade-in card
============================================================ */
.hero{position:relative;overflow:hidden;}
/* Gradiente animado de fondo: 8s infinite alternate, CSS keyframes, sin JS */
.hero::before{
content:"";position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;
background:radial-gradient(60% 70% at 18% 22%, rgba(22,101,52,0.22) 0%, rgba(250,247,242,0) 60%),
radial-gradient(45% 60% at 82% 80%, rgba(22,101,52,0.10) 0%, rgba(250,247,242,0) 60%);
background-size:120% 120%;background-position:0% 50%;
animation:ma-hero-gradient 8s ease-in-out infinite alternate;
}
@keyframes ma-hero-gradient{
0% {background-position:0% 50%;}
100% {background-position:100% 50%;}
}
.hero .wrap{position:relative;z-index:1;}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;align-items:stretch;padding:48px 0 32px;}
.hero__text{display:flex;flex-direction:column;gap:18px;}
.hero__headline{
font-family:var(--f-serif);font-weight:700;font-size:36px;line-height:1.15;color:var(--c-ink);
letter-spacing:-0.015em;margin:0;
}
.hero__headline em{font-style:normal;color:var(--c-green);}
.hero__sub{
font-family:var(--f-sans);font-size:15px;line-height:1.7;color:var(--c-ink-70);
max-width:460px;margin:0;
}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;}
.ma-btn--lg{padding:12px 22px;font-size:15px;}
/* Fade-in card al cargar (la card es .ma-plate dentro de .hero__card) */
.hero__card .ma-plate{
opacity:0;transform:translateY(10px);
animation:ma-hero-card-in 0.6s ease 0.2s forwards;
}
@keyframes ma-hero-card-in{to{opacity:1;transform:translateY(0);}}
/* Mobile: 1 columna · titular 26px · CTAs full width apilados · card debajo */
@media(max-width:900px){
.hero__grid{grid-template-columns:1fr;gap:28px;padding:32px 0 24px;}
.hero__headline{font-size:26px;}
.hero__sub{max-width:none;}
.hero__ctas{flex-direction:column;align-items:stretch;}
.hero__ctas .ma-btn{width:100%;text-align:center;justify-content:center;}
}
/* Reduced motion: cancelamos gradiente y fade-in */
@media (prefers-reduced-motion: reduce){
.hero::before{animation:none;}
.hero__card .ma-plate{opacity:1;transform:none;animation:none;}
}
/* ============================================================
23. §04 NOTICIAS DEL DÍA (Sesión 2)
3 láminas más recientes · indicador niveles · hover 3D · mobile carrusel
============================================================ */
.ma-news3{padding:48px 0 24px;}
.ma-news3__head{margin-bottom:24px;}
.ma-news3__head h2{font-family:var(--f-serif);font-weight:700;font-size:28px;color:var(--c-ink);margin-top:6px;}
.ma-news3__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ma-news3__card{
display:flex;flex-direction:column;gap:10px;
padding:18px;background:var(--c-paper);
border:1px solid var(--c-border);border-radius:var(--r-card);
text-decoration:none;color:var(--c-ink);
transition:transform 0.3s ease, border-color 0.3s ease;
transform-style:preserve-3d;will-change:transform;
}
.ma-news3__card:hover{
transform:perspective(600px) rotateY(2deg) rotateX(1deg);
border-color:var(--c-ink-30);
}
.ma-news3__card-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.ma-news3__num{font-family:var(--f-mono);font-size:10.5px;color:var(--c-ink-50);letter-spacing:0.06em;text-transform:uppercase;}
.ma-news3__title{font-family:var(--f-serif);font-weight:600;font-size:17px;line-height:1.3;color:var(--c-ink);margin:0;}
.ma-news3__date{font-family:var(--f-sans);font-size:12px;color:var(--c-ink-50);}
.ma-news3__levels{list-style:none;padding:0;margin:6px 0 0;display:flex;gap:6px;flex-wrap:wrap;}
.ma-news3__lvl{font-family:var(--f-mono);font-size:10px;font-weight:600;padding:3px 8px;border-radius:10px;letter-spacing:0.04em;}
.ma-news3__lvl--free{background:var(--c-green-l);color:var(--c-green);}
.ma-news3__lvl--premium{background:rgba(180,83,9,0.10);color:var(--c-gold);}
@media(max-width:900px){
.ma-news3__grid{
grid-template-columns:repeat(3,90%);
overflow-x:auto;scroll-snap-type:x mandatory;
gap:12px;padding-bottom:8px;
-webkit-overflow-scrolling:touch;
}
.ma-news3__card{scroll-snap-align:start;}
}
/* ============================================================
24. §05 DEMO NIVELES con TEXTO REAL (Sesión 2)
3 columnas desktop · texto del hero post · candados condicionales
============================================================ */
.ma-niveles{padding:24px 0 48px;}
.ma-niveles__head{margin-bottom:24px;text-align:left;}
.ma-niveles__head h2{font-family:var(--f-serif);font-weight:700;font-size:26px;color:var(--c-ink);line-height:1.25;margin-top:6px;}
.ma-niveles__head h2 em{font-style:normal;color:var(--c-green);}
.ma-niveles__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ma-niveles__card{
display:flex;flex-direction:column;
background:var(--c-paper);border:1px solid var(--c-border);
border-radius:var(--r-card);padding:22px;position:relative;
opacity:0;transform:translateX(-20px);
transition:opacity 0.6s ease, transform 0.6s ease;
transition-delay:var(--reveal-delay,0s);
}
.ma-niveles__card.is-visible{opacity:1;transform:translateX(0);}
.ma-niveles__card--i{border-color:var(--c-green);background:rgba(22,101,52,0.04);}
.ma-niveles__card--iii{opacity:0.95;}
.ma-niveles__card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--c-border);}
.ma-niveles__num{font-family:var(--f-serif);font-size:32px;font-weight:700;color:var(--c-green);line-height:1;}
.ma-niveles__num--gold{color:var(--c-gold);}
.ma-niveles__title{font-family:var(--f-sans);font-size:14px;font-weight:600;color:var(--c-ink);}
.ma-niveles__title--gold{color:var(--c-gold);}
.ma-niveles__sub{font-family:var(--f-sans);font-size:11px;color:var(--c-ink-50);margin-top:2px;}
.ma-niveles__body{font-family:var(--f-sans);font-size:13.5px;line-height:1.65;color:var(--c-ink-70);}
.ma-niveles__body p{margin:0 0 10px;}
.ma-niveles__body--fade{position:relative;max-height:280px;overflow:hidden;}
.ma-niveles__body--fade::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:80px;pointer-events:none;
background:linear-gradient(to bottom, rgba(255,255,255,0), var(--c-paper) 85%);
}
.ma-niveles__lock{
display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;
background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-ui);
text-decoration:none;transition:border-color 150ms ease, transform 150ms ease;
}
.ma-niveles__lock:hover{border-color:var(--c-green);transform:translateY(-1px);}
.ma-niveles__lock--premium:hover{border-color:var(--c-gold);}
.ma-niveles__lock-icon{font-size:16px;line-height:1;}
.ma-niveles__lock-text{font-family:var(--f-sans);font-size:13px;font-weight:600;color:var(--c-green);}
.ma-niveles__lock-text--gold{color:var(--c-gold);}
.ma-niveles__lock-sub{font-family:var(--f-sans);font-size:11px;color:var(--c-ink-50);margin-top:2px;}
.ma-niveles__premium-box{
background:rgba(180,83,9,0.05);border:1px solid rgba(180,83,9,0.18);
border-radius:var(--r-ui);padding:14px;
}
.ma-niveles__premium-label{font-family:var(--f-sans);font-size:11.5px;font-weight:600;color:var(--c-gold);margin:0 0 8px;text-transform:uppercase;letter-spacing:0.04em;}
.ma-niveles__premium-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
.ma-niveles__premium-list li{font-family:var(--f-sans);font-size:12.5px;line-height:1.5;color:var(--c-ink-70);padding-left:18px;position:relative;}
.ma-niveles__premium-list li::before{content:"+";position:absolute;left:0;top:0;color:var(--c-gold);font-weight:700;}
.ma-niveles__premium-text{font-family:var(--f-sans);font-size:12.5px;color:var(--c-ink-70);margin:0;}
@media(max-width:900px){
.ma-niveles__grid{
grid-template-columns:repeat(3,90%);
overflow-x:auto;scroll-snap-type:x mandatory;
gap:12px;padding-bottom:8px;
-webkit-overflow-scrolling:touch;
}
.ma-niveles__card{scroll-snap-align:start;}
.ma-niveles__head h2{font-size:22px;}
}
@media (prefers-reduced-motion: reduce){
.ma-niveles__card{opacity:1;transform:none;transition:none;}
}
/* ============================================================
25. §06 CALCULADORA HOMEPAGE (Sesión 2)
#section-calculadora · pills + form + 3 escenarios + disclaimer
============================================================ */
.ma-calc-home{padding:48px 0;position:relative;}
.ma-calc-home__anchor{position:absolute;top:-80px;}
.ma-calc-home__head{margin-bottom:18px;}
.ma-calc-home__title{font-family:var(--f-serif);font-weight:700;font-size:26px;color:var(--c-ink);margin-top:6px;}
.ma-calc-home__sub{font-family:var(--f-sans);font-size:13.5px;color:var(--c-ink-50);margin-top:6px;}
.ma-calc-home__pills{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px;}
.ma-calc-home__pill{
background:var(--c-paper);border:1px solid var(--c-border);border-radius:var(--r-ui);
padding:12px;text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center;
}
.ma-calc-home__pill-emoji{font-size:22px;line-height:1;}
.ma-calc-home__pill-label{font-family:var(--f-sans);font-size:12px;font-weight:600;color:var(--c-ink);}
.ma-calc-home__box{
background:#FFFBF5;border:1.5px dashed var(--c-gold);border-radius:var(--r-card);
padding:24px;
}
.ma-calc-home__form{display:flex;flex-direction:column;gap:14px;margin-bottom:18px;}
.ma-calc-home__field{display:flex;align-items:center;gap:14px;}
.ma-calc-home__field label{font-family:var(--f-sans);font-size:13px;font-weight:500;color:var(--c-ink-70);min-width:140px;}
.ma-calc-home__input-wrap{display:flex;align-items:center;gap:6px;flex:1;max-width:280px;}
.ma-calc-home__input-wrap input{
flex:1;padding:10px 12px;font-family:var(--f-mono);font-size:15px;
border:1px solid var(--c-border);border-radius:var(--r-ui);background:var(--c-paper);
color:var(--c-ink);
}
.ma-calc-home__input-wrap input:focus{outline:none;border-color:var(--c-gold);}
.ma-calc-home__unit{font-family:var(--f-sans);font-size:13px;color:var(--c-ink-50);}
.ma-calc-home__toggle{display:flex;gap:6px;}
.ma-calc-home__toggle-btn{
padding:6px 14px;font-family:var(--f-sans);font-size:12px;font-weight:600;
border:1px solid var(--c-border);background:transparent;color:var(--c-ink-50);
border-radius:18px;cursor:pointer;transition:all 150ms ease;
}
.ma-calc-home__toggle-btn.is-active{background:var(--c-green-l);color:var(--c-green);border-color:var(--c-green);}
.ma-calc-home__toggle-btn:hover{border-color:var(--c-green);}
.ma-calc-home__note-fijo{
font-family:var(--f-sans);font-size:12.5px;color:var(--c-ink-70);
background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-ui);
padding:10px 14px;margin-bottom:12px;
}
.ma-calc-home__results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.ma-calc-home__sc{
padding:14px;border-radius:var(--r-ui);
display:flex;flex-direction:column;gap:6px;text-align:center;
}
.ma-calc-home__sc--up{background:rgba(22,101,52,0.10);color:var(--c-green);}
.ma-calc-home__sc--base{background:rgba(30,64,175,0.10);color:var(--c-seg);}
.ma-calc-home__sc--down{background:rgba(153,27,27,0.10);color:var(--c-rup);}
.ma-calc-home__sc-label{font-family:var(--f-sans);font-size:11.5px;font-weight:600;letter-spacing:0.02em;}
.ma-calc-home__sc-val{font-family:var(--f-serif);font-size:22px;font-weight:700;line-height:1.1;letter-spacing:-0.01em;}
.ma-calc-home__disclaimer{
font-family:var(--f-mono);font-size:10.5px;line-height:1.55;color:var(--c-ink-50);
text-align:center;margin:0;padding-top:14px;border-top:1px dashed rgba(180,83,9,0.25);
}
@media(max-width:900px){
.ma-calc-home__pills{grid-template-columns:repeat(2,1fr);}
.ma-calc-home__field{flex-direction:column;align-items:flex-start;gap:6px;}
.ma-calc-home__field label{min-width:auto;}
.ma-calc-home__input-wrap{max-width:100%;width:100%;}
.ma-calc-home__results{grid-template-columns:1fr;}
}
/* Sesión 2 fix · Contexto de la calculadora homepage */
.ma-calc-home__context{
display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
margin-bottom:16px;padding:12px 14px;
background:var(--c-green-l);border:1px solid rgba(22,101,52,0.15);border-radius:var(--r-ui);
}
.ma-calc-home__context-label{font-family:var(--f-sans);font-size:12.5px;font-weight:500;color:var(--c-ink-70);}
.ma-calc-home__context-link{
font-family:var(--f-sans);font-size:13.5px;font-weight:600;color:var(--c-green);
text-decoration:none;flex:1;min-width:0;
}
.ma-calc-home__context-link:hover{text-decoration:underline;}
.ma-calc-home__none{
font-family:var(--f-sans);font-size:14px;color:var(--c-ink-50);text-align:center;
padding:24px;background:var(--c-paper);border:1px dashed var(--c-border);border-radius:var(--r-ui);
}
.ma-calc-home__none a{color:var(--c-green);text-decoration:underline;}
/* ============================================================
26. §07 ESCENARIOS DE LA SEMANA (Sesión 3)
3 cards (optimista verde / base azul / pesimista rojo difuminado)
============================================================ */
.ma-esc{padding:48px 0;}
.ma-esc__head{margin-bottom:24px;}
.ma-esc__title{font-family:var(--f-serif);font-weight:700;font-size:24px;line-height:1.3;color:var(--c-ink-70);margin-top:6px;}
.ma-esc__sub{font-family:var(--f-sans);font-size:13px;color:var(--c-ink-50);font-style:italic;margin-top:4px;}
.ma-esc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.ma-esc__card{
padding:24px 20px;border-radius:var(--r-card);
display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;
}
.ma-esc__card--opt{background:rgba(22,101,52,0.10);color:var(--c-green);}
.ma-esc__card--base{background:rgba(30,64,175,0.10);color:var(--c-seg);}
.ma-esc__card--pes{background:rgba(153,27,27,0.10);color:var(--c-rup);}
.ma-esc__card--pes:not(.is-unlocked) .ma-esc__desc{filter:blur(3px);pointer-events:none;user-select:none;}
.ma-esc__card--pes.is-unlocked .ma-esc__desc{filter:none;pointer-events:auto;user-select:auto;color:var(--c-ink-70);}
.ma-esc__label{font-family:var(--f-sans);font-size:12.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;}
.ma-esc__pct{font-family:var(--f-serif);font-weight:700;font-size:38px;line-height:1;letter-spacing:-0.02em;}
.ma-esc__desc{font-family:var(--f-sans);font-size:12.5px;line-height:1.5;}
.ma-esc__lock{position:absolute;top:14px;right:14px;font-size:16px;opacity:0.6;}
.ma-esc__premium-note{
font-family:var(--f-sans);font-size:12px;color:var(--c-ink-50);font-style:italic;
text-align:center;margin-top:14px;
}
.ma-esc__premium-note a{color:var(--c-green);text-decoration:none;font-weight:600;}
.ma-esc__premium-note a:hover{text-decoration:underline;}
@media(max-width:900px){
.ma-esc__grid{grid-template-columns:1fr;}
}
/* ============================================================
27. §08 MÉTRICAS DEL PRODUCTO (Sesión 3)
4 columnas desktop · 2×2 mobile · conteo animado IO
============================================================ */
.ma-metr{padding:24px 0 48px;}
.ma-metr__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.ma-metr__cell{
background:var(--c-paper);border:1px solid var(--c-border);border-radius:var(--r-card);
padding:24px 16px;text-align:center;display:flex;flex-direction:column;gap:6px;
}
.ma-metr__val{font-family:var(--f-mono);font-weight:700;font-size:28px;color:var(--c-green);line-height:1;letter-spacing:-0.02em;}
.ma-metr__lbl{font-family:var(--f-sans);font-size:11.5px;color:var(--c-ink-50);line-height:1.4;}
@media(max-width:600px){
.ma-metr__grid{grid-template-columns:1fr 1fr;}
}
/* ============================================================
28. §09 CTA FINAL · refinado spec Doc 1 §3.9 (Sesión 3)
============================================================ */
.cta-final{padding:48px 0;text-align:center;}
.cta-final__title{font-family:var(--f-serif);font-weight:700;font-size:26px;color:var(--c-ink);margin-bottom:10px;}
.cta-final__title em{font-style:normal;color:var(--c-green);}
.cta-final__lede{font-family:var(--f-sans);font-size:14px;line-height:1.65;color:var(--c-ink-70);margin-bottom:22px;}
.cta-final__lede strong{color:var(--c-ink);}
.cta-final__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;}
.cta-final__note{font-family:var(--f-mono);font-size:10.5px;color:var(--c-ink-50);letter-spacing:0.02em;}
@media(max-width:600px){
.cta-final__actions{flex-direction:column;align-items:stretch;}
.cta-final__actions .ma-btn{width:100%;text-align:center;justify-content:center;}
.cta-final__title{font-size:22px;}
}
/* ============================================================
29. §10 FOOTER REDISEÑADO (Sesión 3)
marca col 40% + 3 cols links 60% · mobile: marca → links → disclaimer
============================================================ */
.site-footer{
background:var(--c-dark);
color:rgba(255,255,255,0.55);
padding:24px 40px 22px;
border-top:1px solid rgba(255,255,255,0.06);
/* Hello Elementor parent theme aplica max-width:1140px al elemento