:root { --ink: #102027; --ink-2: #223036; --muted: #667278; --paper: #fbf8f2; --paper-2: #f1ece3; --white: #ffffff; --bg-soft: #f6f8fa; --teal: #1f6f68; --teal-dark: #164c49; --gold: #c4863c; --clay: #bf5b45; --olive: #61724f; --line: rgba(16, 32, 39, 0.13); --shadow: 0 18px 50px rgba(16, 32, 39, 0.12); --shadow-soft: 0 10px 28px rgba(16, 32, 39, 0.08); --radius: 8px; --max: 1180px; --header: 76px; color-scheme: light; } /* ══════════════════════════════════════════════════ Dark mode — activado con [data-theme="dark"] en El header conserva su tono oscuro original. ══════════════════════════════════════════════════ */ [data-theme="dark"] { --ink: #f0eadf; --ink-2: #c5beb1; --muted: #8a9197; --paper: #0e1a1f; --paper-2: #142329; --white: #1a2a30; --bg-soft: rgba(255, 255, 255, 0.04); --teal: #4dadab; --teal-dark: #6dc4c0; --gold: #d8a665; --clay: #d4795f; --olive: #a8b896; --line: rgba(255, 255, 255, 0.10); --shadow: 0 18px 50px rgba(0, 0, 0, 0.42); --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.28); color-scheme: dark; } /* ══════════════════════════════════════════════════ Dark mode — overrides Truco clave: dentro de contenedores con fondo oscuro intencional, redefinir --white localmente para que sea blanco real. Esto arregla decenas de "color: var(--white)" sin tocar 30+ reglas. ══════════════════════════════════════════════════ */ /* Contenedores con fondo oscuro permanente — --white local debe ser blanco real */ [data-theme="dark"] .hero, [data-theme="dark"] .practice-hero, [data-theme="dark"] .tools-hero, [data-theme="dark"] .calc-hero, [data-theme="dark"] .est-hero, [data-theme="dark"] .notas-hero, [data-theme="dark"] .legal-hero, [data-theme="dark"] .nota-article-hero, [data-theme="dark"] .sobre-hero, [data-theme="dark"] .pytronic-band, [data-theme="dark"] .pytronic-content, [data-theme="dark"] .ratios-summary, [data-theme="dark"] .bcv-rate-panel, [data-theme="dark"] .faq-cta, [data-theme="dark"] .est-contact, [data-theme="dark"] .notas-widget-newsletter, [data-theme="dark"] .site-header, [data-theme="dark"] .site-footer, [data-theme="dark"] .nota-card-featured, [data-theme="dark"] .project-featured, [data-theme="dark"] .pub-card-featured, [data-theme="dark"] .finc-tab.is-active, [data-theme="dark"] .practice-tab.is-active, [data-theme="dark"] .math-skill.is-active, [data-theme="dark"] .segmented-control button.is-active, [data-theme="dark"] .mini-list button.is-active, [data-theme="dark"] .res-tab.is-active, [data-theme="dark"] .quiz-tab.is-active { --white: #ffffff; } /* Header CTA y lang-button activo: en dark mode fondo claro requiere texto oscuro */ [data-theme="dark"] .header-cta { background: #ffffff; color: #102027; } [data-theme="dark"] .lang-button.is-active { background: var(--gold); color: #102027; } /* Fix de especificidad para pub-card destacada (afecta light y dark mode): .pub-card h3 viene después en el CSS y gana por orden. Forzamos con más specificity. */ .publication-grid .pub-card-featured h3 { color: var(--white); font-size: 1.45rem; } .publication-grid .pub-card-featured p { color: rgba(255, 255, 255, 0.72); } [data-theme="dark"] .publication-grid .pub-card-featured h3 { color: #ffffff; } /* Mismo bug en nota-card-featured: .nota-card h2 a sobreescribe a .nota-card-featured h2 a */ .notas-grid .nota-card-featured h2 a, .notas-grid .nota-card-featured h2 { color: var(--white); } .notas-grid .nota-card-featured p { color: rgba(255, 255, 255, 0.72); } [data-theme="dark"] .notas-grid .nota-card-featured h2 a, [data-theme="dark"] .notas-grid .nota-card-featured h2 { color: #ffffff; } /* ══════════════════════════════════════════════════ Tools home grid — sección destacada de herramientas en el index (para descubrimiento) ══════════════════════════════════════════════════ */ .tools-home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(var(--max), 100%); margin: 0 auto; } /* ── Categorías en home ──────────────────────────────────────── */ .tools-home-cat { width: min(var(--max), 100%); margin: 0 auto 32px; } .tools-home-cat:last-of-type { margin-bottom: 22px; } .tools-home-cat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .tools-home-cat-head > div { flex: 1; min-width: 0; } .tools-home-cat-head h3 { margin: 0 0 2px; color: var(--ink); font-family: "Inter", system-ui, sans-serif; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } .tools-home-cat-head > div > p { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.4; } .tools-home-cat-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: color-mix(in srgb, var(--c, var(--teal)) 14%, transparent); color: var(--c, var(--teal)); font-size: 1.15rem; flex-shrink: 0; } .tools-home-cat-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 0.82rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background 160ms ease, color 160ms ease; border: 1px solid var(--line); } .tools-home-cat-link:hover { background: var(--teal); color: var(--white); border-color: var(--teal); } @media (max-width: 640px) { .tools-home-cat-head { flex-wrap: wrap; gap: 10px; } .tools-home-cat-link { margin-left: auto; order: 3; flex-shrink: 0; } } .tool-home-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--shadow-soft); color: inherit; text-decoration: none; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, border-color 220ms ease; } .tool-home-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(16, 32, 39, 0.14); border-color: rgba(31, 111, 104, 0.32); } .tool-home-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-size: 1.3rem; margin-bottom: 8px; transition: transform 220ms ease; } .tool-home-card:hover .tool-home-icon { transform: scale(1.05); } .tool-home-card h3 { margin: 0; color: var(--ink); font-family: "Newsreader", Georgia, serif; font-size: 1.15rem; line-height: 1.2; } .tool-home-card p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; } .tools-home-cta { display: flex; justify-content: center; width: min(var(--max), 100%); margin: 0 auto; } @media (max-width: 900px) { .tools-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .tools-home-grid { grid-template-columns: 1fr; } } /* Lab section: gradiente claro hardcodeado que falla en dark mode (texto claro sobre fondo claro) */ [data-theme="dark"] .lab-section { background: linear-gradient(180deg, rgba(14, 26, 31, 0.86), rgba(14, 26, 31, 0.98)), url("../img/hero-bg.jpg") center / cover fixed; } /* ══════════════════════════════════════════════════ FIX GLOBAL: .button-secondary fue diseñado para fondos OSCUROS (heroes) — usa color:var(--white) y borde rgba blanco. Cuando aparece dentro de tarjetas con fondo claro (calc-card, etc.) el texto blanco sobre blanco queda invisible. Damos un estilo "card-friendly" por defecto en esos contextos. Las apariciones en heroes conservan su estilo original. ══════════════════════════════════════════════════ */ .calc-card .button-secondary, .calc-card-actions .button-secondary, .bcv-manual .button-secondary, .contact-form-wrap .button-secondary, .notas-empty .button-secondary { border-color: var(--line); background: var(--paper-2); color: var(--ink); } .calc-card .button-secondary:hover, .calc-card-actions .button-secondary:hover, .bcv-manual .button-secondary:hover, .contact-form-wrap .button-secondary:hover, .notas-empty .button-secondary:hover { background: var(--white); border-color: var(--teal); color: var(--teal-dark); } /* También .button-cv si alguna vez se usa fuera del hero */ .calc-card .button-cv, .calc-card-actions .button-cv { border-color: var(--line); background: transparent; color: var(--ink); } /* ══════════════════════════════════════════════════ Pulidos finales dark mode ══════════════════════════════════════════════════ */ /* Badge "DESTACADA" sobre fondo dorado: el texto siempre debe ser oscuro (en dark mode --ink se hace claro y daría bajo contraste sobre dorado). */ [data-theme="dark"] .tool-card-badge, [data-theme="dark"] .badge-base, [data-theme="dark"] .button-primary { color: #102027; } /* Iconos con fondo subtle: en dark mode los fondos rgba light apenas se ven. Subimos un poco la opacidad usando el color teal del tema. */ [data-theme="dark"] .signal-list i, [data-theme="dark"] .service-card i, [data-theme="dark"] .lab-card-header > i, [data-theme="dark"] .est-overview-card i, [data-theme="dark"] .tools-context-features i, [data-theme="dark"] .ratios-section-header > i, [data-theme="dark"] .contact-link i, [data-theme="dark"] .social-strip a { background: rgba(77, 173, 171, 0.16); color: var(--teal); } /* Iconos con tonos clay/dorado en sus contenedores subtle */ [data-theme="dark"] .resource-row > span { background: rgba(212, 121, 95, 0.16); color: var(--clay); } /* Tags coloreadas — los fondos rgba light desaparecen en dark, hay que subirlos */ [data-theme="dark"] .nota-tag-economia { background: rgba(77, 173, 171, 0.18); color: var(--teal-dark); } [data-theme="dark"] .nota-tag-tecnologia { background: rgba(255, 255, 255, 0.08); color: var(--ink); } [data-theme="dark"] .nota-tag-crecimiento{ background: rgba(168, 184, 150, 0.18); color: var(--olive); } [data-theme="dark"] .nota-tag-hobbies { background: rgba(216, 166, 101, 0.18); color: var(--gold); } [data-theme="dark"] .nota-tag-recursos { background: rgba(212, 121, 95, 0.18); color: var(--clay); } [data-theme="dark"] .pub-tag { background: rgba(212, 121, 95, 0.18); color: var(--clay); } [data-theme="dark"] .tag { background: rgba(168, 184, 150, 0.18); color: var(--olive); } /* Race track en typing — fondo subtle dark */ [data-theme="dark"] .race-track { background: rgba(255, 255, 255, 0.06); } /* Cookies banner: el inline ya tiene su propia paleta oscura, OK */ /* Bordes blancos que se hacen muy visibles en light pero deberían reducirse en dark */ [data-theme="dark"] .nota-card-featured .nota-footer { border-top-color: rgba(255, 255, 255, 0.10); } /* Math problem display y typing display refuerzan contraste */ [data-theme="dark"] .math-problem, [data-theme="dark"] .typing-display { color: var(--ink); } /* Custom hint en typing-page (texto-libre) */ [data-theme="dark"] .custom-hint.is-ok { color: var(--teal-dark); } [data-theme="dark"] .custom-hint.is-error { color: var(--clay); } /* Texto base */ [data-theme="dark"] body { color: var(--ink); } [data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] dd { color: var(--ink-2); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--ink); } /* Excepción: dentro de heroes/bands oscuros, los headings van blancos (la redefinición local de --white los hace blancos cuando usan color:var(--white), pero algunos usan color:var(--ink) o no especifican — los aseguramos blancos aquí) */ [data-theme="dark"] .hero h1, [data-theme="dark"] .practice-hero h1, [data-theme="dark"] .tools-hero h1, [data-theme="dark"] .calc-hero h1, [data-theme="dark"] .est-hero h1, [data-theme="dark"] .notas-hero h1, [data-theme="dark"] .legal-hero h1, [data-theme="dark"] .nota-article-hero h1, [data-theme="dark"] .pytronic-content h2, [data-theme="dark"] .pytronic-content p:not(.eyebrow), [data-theme="dark"] .ratios-summary strong, [data-theme="dark"] .faq-cta h3, [data-theme="dark"] .est-contact h2, [data-theme="dark"] .nota-card-featured h2 a, [data-theme="dark"] .nota-card-featured h2, [data-theme="dark"] .project-featured h3, [data-theme="dark"] .pub-card-featured h3 { color: #ffffff; } /* Header brand title que pierde contraste */ [data-theme="dark"] .brand-copy strong { color: #f0eadf; } /* Inputs, selects, textareas */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--paper-2); color: var(--ink); border-color: var(--line); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--muted); } /* Bandas oscuras (Pytronic, project-featured, ratios-summary, decision-panel) En light tienen var(--ink) como fondo. En dark las hacemos más oscuras que paper. */ [data-theme="dark"] .pytronic-band, [data-theme="dark"] .project-featured, [data-theme="dark"] .pub-card-featured, [data-theme="dark"] .nota-card-featured, [data-theme="dark"] .ratios-summary, [data-theme="dark"] .bcv-rate-panel, [data-theme="dark"] .faq-cta, [data-theme="dark"] .est-contact, [data-theme="dark"] .notas-widget-newsletter { background: #050d11; border: 1px solid rgba(255, 255, 255, 0.08); } /* Hero sections — sin border explícito para evitar la línea visible. El hero ya tiene su propio overlay degradado que cierra la transición con la sección siguiente. La transición de color paper→paper-2 es suficiente para separar visualmente. */ [data-theme="dark"] .hero, [data-theme="dark"] .practice-hero, [data-theme="dark"] .tools-hero, [data-theme="dark"] .calc-hero, [data-theme="dark"] .est-hero, [data-theme="dark"] .notas-hero, [data-theme="dark"] .legal-hero, [data-theme="dark"] .nota-article-hero, [data-theme="dark"] .sobre-hero { border-bottom: none; } /* Site header — más oscuro en dark mode para separarse del contenido */ [data-theme="dark"] .site-header { background: rgba(5, 13, 17, 0.92); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* Site footer */ [data-theme="dark"] .site-footer { background: #050d11; border-top: 1px solid rgba(255, 255, 255, 0.06); } /* Code blocks y typing display */ [data-theme="dark"] code, [data-theme="dark"] .typing-display { background: var(--paper-2); color: var(--ink-2); } /* Metric cards primary — gradiente con var(--white) que en dark queda sin matiz */ [data-theme="dark"] .metric-card.metric-primary { background: linear-gradient(135deg, var(--white) 0%, rgba(77, 173, 171, 0.06) 100%); } /* Tool card featured — gradiente con tinte teal apenas perceptible en light; en dark le bajamos el peso del tinte para no perder contraste */ [data-theme="dark"] .tool-card-featured { background: linear-gradient(135deg, var(--white) 0%, rgba(77, 173, 171, 0.04) 100%); } /* Decisión panels — fondos rgba sobre ink que en dark casi desaparecen */ [data-theme="dark"] .decision-positive { background: rgba(77, 173, 171, 0.12); } [data-theme="dark"] .decision-negative { background: rgba(212, 121, 95, 0.12); } [data-theme="dark"] .decision-neutral { background: rgba(216, 166, 101, 0.12); } [data-theme="dark"] .decision-panel { background: rgba(255, 255, 255, 0.04); } /* Filter chips activos del notas */ [data-theme="dark"] .notas-filter.is-active { background: var(--paper-2); border-color: var(--teal); color: var(--ink); } /* Tabla calc */ [data-theme="dark"] .calc-table th { background: var(--paper-2); color: var(--ink); } /* Banner cookies — el script inyecta colores hardcodeados, no podemos cambiarlos sin tocar el script, pero el dark blue del banner sigue funcionando ok */ /* Botón toggle de tema */ .theme-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--radius); background: rgba(255, 255, 255, 0.08); color: var(--white); font-size: 1.05rem; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 220ms ease; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); } .theme-toggle .bi { transition: opacity 220ms ease, transform 320ms ease; } .theme-toggle .theme-icon-sun { display: none; } .theme-toggle .theme-icon-moon { display: block; } [data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; color: var(--gold); } [data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; overflow-x: hidden; text-rendering: optimizeLegibility; } body.nav-open { overflow: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } button { cursor: pointer; } ::selection { background: rgba(31, 111, 104, 0.24); } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; transform: translateY(-140%); border-radius: var(--radius); background: var(--ink); color: var(--white); padding: 10px 14px; transition: transform 180ms ease; } .skip-link:focus { transform: translateY(0); } .site-header { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: var(--header); padding: 12px clamp(18px, 5vw, 54px); border-bottom: 1px solid rgba(255, 255, 255, 0.16); background: rgba(16, 32, 39, 0.86); color: var(--white); backdrop-filter: blur(18px); } .brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } .brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius); background: rgba(255, 255, 255, 0.08); color: var(--gold); font-weight: 800; } .brand-copy { display: grid; line-height: 1.2; } .brand-copy strong { font-size: 0.98rem; } .brand-copy small { color: rgba(255, 255, 255, 0.68); font-size: 0.78rem; } .site-nav { display: flex; align-items: center; gap: 4px; } .nav-language-mobile { display: none; } .site-nav a { border-radius: var(--radius); color: rgba(255, 255, 255, 0.78); font-size: 0.93rem; font-weight: 600; padding: 10px 12px; transition: background 180ms ease, color 180ms ease; } .site-nav a:hover, .site-nav a:focus-visible { background: rgba(255, 255, 255, 0.1); color: var(--white); outline: none; } .site-nav a.is-active-section { color: var(--gold); position: relative; } .site-nav a.is-active-section::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--gold); border-radius: 2px; } /* En mobile, el indicador va al lado izquierdo en vez de debajo */ @media (max-width: 760px) { .site-nav a.is-active-section::after { left: -8px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); width: 3px; height: 18px; } } .header-actions { display: flex; align-items: center; gap: 10px; } .language-switcher { display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); overflow: hidden; } .lang-button { border: 0; background: transparent; color: rgba(255, 255, 255, 0.72); font-size: 0.8rem; font-weight: 800; padding: 8px 10px; } .lang-button.is-active { background: var(--gold); color: var(--ink); } .header-cta { border-radius: var(--radius); background: var(--white); color: var(--ink); font-size: 0.9rem; font-weight: 800; padding: 10px 14px; } .menu-button { display: inline-flex !important; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--radius); background: rgba(255, 255, 255, 0.08); color: var(--white); font-size: 1.35rem; } @media (min-width: 1201px) { .menu-button { display: none !important; } } .hero { position: relative; display: grid; align-items: end; min-height: calc(78svh - var(--header)); padding: 62px clamp(18px, 7vw, 88px) 42px; isolation: isolate; overflow: hidden; background-image: linear-gradient(90deg, rgba(16, 32, 39, 0.95) 0%, rgba(16, 32, 39, 0.82) 42%, rgba(16, 32, 39, 0.35) 100%), url("../img/profile-img-2026.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center 34%; color: var(--white); } .hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 32%; background: linear-gradient(180deg, rgba(16, 32, 39, 0), rgba(16, 32, 39, 0.72)); z-index: -1; } .hero-content { width: min(720px, 100%); } .eyebrow { margin: 0 0 14px; color: var(--gold); font-size: 0.82rem; font-weight: 800; text-transform: uppercase; } .hero h1 { margin: 0; color: var(--white); font-family: "Newsreader", Georgia, serif; font-size: 5rem; font-weight: 700; line-height: 0.95; } .hero-lede { max-width: 650px; margin: 22px 0 0; color: rgba(255, 255, 255, 0.84); font-size: 1.22rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border: 1px solid transparent; border-radius: var(--radius); font-weight: 800; padding: 12px 18px; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; } .button:hover, .button:focus-visible { transform: translateY(-2px); outline: none; } .button-primary { background: var(--gold); color: var(--ink); box-shadow: 0 12px 26px rgba(196, 134, 60, 0.22); } .button-secondary { border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.12); color: var(--white); } .button-cv { border-color: rgba(255, 255, 255, 0.18); background: transparent; color: rgba(255, 255, 255, 0.72); font-size: 0.88rem; } .button-cv:hover, .button-cv:focus-visible { border-color: var(--gold); color: var(--gold); } .hero-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(720px, 100%); margin: 28px 0 0; } .hero-proof div { border-top: 1px solid rgba(255, 255, 255, 0.22); padding-top: 14px; } .hero-proof dt { color: var(--white); font-weight: 800; } .hero-proof dd { margin: 4px 0 0; color: rgba(255, 255, 255, 0.68); font-size: 0.92rem; } .section { padding: 86px clamp(18px, 6vw, 76px); } .section-alt { background: var(--paper-2); } .section-intro { padding-top: 22px; } .section-intro .reveal { opacity: 1; transform: none; } .section-grid, .split-layout, .contact-grid { display: grid; grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr); gap: 46px; width: min(var(--max), 100%); margin: 0 auto; } .section-heading { width: min(850px, 100%); margin: 0 auto 36px; text-align: center; } .section-heading h2, .section-kicker h2, .pytronic-content h2 { margin: 0; color: var(--ink); font-family: "Newsreader", Georgia, serif; font-size: 3rem; line-height: 1.02; } .section-heading p:not(.eyebrow), .section-copy > p, .pytronic-content p:not(.eyebrow), .contact-section .section-heading p:not(.eyebrow) { color: var(--muted); font-size: 1.06rem; } .section-copy > p { margin-top: 0; } .signal-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; } .signal-list article, .service-card, .resource-panel, .project-card, .lab-card, .publication-list article, .contact-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); } .signal-list article { padding: 22px; } .signal-list i, .service-card i, .lab-card-header > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); background: rgba(31, 111, 104, 0.11); color: var(--teal); font-size: 1.3rem; } .signal-list h3, .service-card h3, .resource-row h3, .project-card h3, .lab-card h3, .publication-list h3 { margin: 16px 0 8px; color: var(--ink); font-size: 1.05rem; line-height: 1.25; } .signal-list p, .service-card p, .resource-row p, .project-card p, .publication-list p, .lab-card-header p { margin: 0; color: var(--muted); } .card-grid, .project-grid, .lab-grid { width: min(var(--max), 100%); margin: 0 auto; } .services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .service-card { display: flex; min-height: 270px; flex-direction: column; padding: 24px; } .service-card a, .project-card a, .resource-row a, .text-action { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: auto; border: 0; border-bottom: 2px solid rgba(196, 134, 60, 0.7); background: transparent; color: var(--teal-dark); font-weight: 800; padding: 0 0 3px; transition: color 180ms ease, border-color 180ms ease; } .service-card a:hover, .project-card a:hover, .resource-row a:hover, .text-action:hover { color: var(--gold); border-bottom-color: var(--gold); } .service-card { transition: transform 220ms ease, box-shadow 220ms ease; } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .service-card p { margin-bottom: 24px; } .split-layout { align-items: start; } .split-layout .section-heading { margin: 0; text-align: left; } .resource-panel { padding: 8px; } .resource-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 118px; border-bottom: 1px solid var(--line); padding: 18px; } .resource-row:last-child { border-bottom: 0; } .resource-row > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); background: rgba(191, 91, 69, 0.1); color: var(--clay); font-size: 1.25rem; } .resource-row h3 { margin-top: 0; } .resource-row a { margin-top: 0; white-space: nowrap; } .project-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .project-card { min-height: 230px; padding: 24px; } .project-featured { display: flex; grid-column: span 2; flex-direction: column; justify-content: space-between; background: var(--ink); color: var(--white); } .project-featured h3, .project-featured p { color: var(--white); } .project-featured p:not(.tag) { color: rgba(255, 255, 255, 0.74); } .project-featured a { color: var(--gold); } .tag { display: inline-flex; width: fit-content; margin: 0 0 18px; border-radius: var(--radius); background: rgba(97, 114, 79, 0.12); color: var(--olive); font-size: 0.75rem; font-weight: 800; padding: 6px 9px; text-transform: uppercase; } .lab-section { background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(251, 248, 242, 1)), url("../img/hero-bg.jpg") center / cover fixed; } .lab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .lab-card { display: flex; min-height: 420px; flex-direction: column; padding: 22px; } .lab-card-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; } .lab-card-header h3 { margin-top: 0; } .math-question { display: grid; place-items: center; min-height: 92px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 2.2rem; font-weight: 800; } .inline-form { display: grid; grid-template-columns: 1fr 48px; gap: 8px; margin-top: 14px; } input, textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); padding: 12px 13px; outline: none; } input:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(31, 111, 104, 0.12); } textarea { min-height: 98px; resize: vertical; } .icon-action { display: grid; place-items: center; border: 0; border-radius: var(--radius); background: var(--teal); color: var(--white); font-size: 1.2rem; } .lab-feedback { min-height: 28px; margin: 14px 0 0; color: var(--teal-dark); font-weight: 800; } .lab-feedback.is-wrong { color: var(--clay); } .scoreline { margin: auto 0 0; color: var(--muted); } .scoreline strong { color: var(--ink); } .typing-target { min-height: 76px; margin: 0 0 14px; border-left: 4px solid var(--gold); background: var(--paper); color: var(--ink-2); font-weight: 700; padding: 14px; } .typing-stats { display: flex; gap: 12px; margin: 12px 0 18px; } .typing-stats span { border-radius: var(--radius); background: rgba(31, 111, 104, 0.1); color: var(--teal-dark); font-weight: 800; padding: 8px 10px; } .quiz-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; } .quiz-tab, .quiz-option { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); font-weight: 800; padding: 10px; } .quiz-tab.is-active { border-color: var(--teal); background: var(--teal); color: var(--white); } .quiz-question { min-height: 70px; margin: 0 0 12px; color: var(--ink); font-weight: 800; } .quiz-options { display: grid; gap: 8px; } .quiz-option { text-align: left; transition: border-color 160ms ease, background 160ms ease; } .quiz-option:hover, .quiz-option:focus-visible { border-color: var(--gold); outline: none; } .quiz-option.is-correct { border-color: var(--teal); background: rgba(31, 111, 104, 0.12); } .quiz-option.is-wrong { border-color: var(--clay); background: rgba(191, 91, 69, 0.12); } .lab-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .lab-link-card { min-height: 330px; } /* El botón al fondo, los chips ocupando el espacio del medio sin importar cuántas filas wrappeen. Mantiene los CTAs de ambas cards alineados. */ .lab-link-card > .button { margin-top: auto; } .lab-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; padding: 0; list-style: none; } .lab-chip-list li { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink-2); font-size: 0.82rem; font-weight: 800; padding: 7px 9px; } .practice-hero { background: linear-gradient(90deg, rgba(16, 32, 39, 0.96), rgba(16, 32, 39, 0.78)), url("../img/hero-bg.jpg") center / cover; color: var(--white); padding: 92px clamp(18px, 7vw, 88px) 74px; } .typing-hero { background: linear-gradient(90deg, rgba(16, 32, 39, 0.96), rgba(31, 111, 104, 0.76)), url("../img/hero-bg.jpg") center / cover; } .math-hero { background: linear-gradient(90deg, rgba(16, 32, 39, 0.96), rgba(196, 134, 60, 0.58)), url("../img/hero-bg.jpg") center / cover; } .practice-hero-inner { width: min(880px, 100%); } .practice-hero h1 { margin: 0; color: var(--white); font-family: "Newsreader", Georgia, serif; font-size: 4rem; line-height: 1; } .practice-hero p:not(.eyebrow) { max-width: 680px; color: rgba(255, 255, 255, 0.78); font-size: 1.12rem; } .practice-section { padding: 48px clamp(18px, 6vw, 76px) 86px; } .practice-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 22px; width: min(var(--max), 100%); margin: 0 auto; align-items: start; } .math-layout { grid-template-columns: 360px minmax(0, 1fr); } .practice-sidebar, .practice-workspace { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); } .practice-sidebar { position: sticky; top: calc(var(--header) + 18px); padding: 18px; } .practice-sidebar .eyebrow { margin-top: 18px; } .practice-sidebar .eyebrow:first-child { margin-top: 0; } .custom-text-panel { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .custom-text-panel .eyebrow { margin-top: 0; } .custom-text-panel textarea { min-height: 130px; font-size: 0.9rem; resize: vertical; } .custom-load-btn { width: 100%; margin-top: 10px; } .custom-hint { margin: 8px 0 0; font-size: 0.82rem; font-weight: 700; min-height: 20px; } .custom-hint.is-ok { color: var(--teal-dark); } .custom-hint.is-error { color: var(--clay); } .practice-tabs, .mini-list, .math-category-grid { display: grid; gap: 8px; } .practice-tab, .math-skill, .mini-list button, .segmented-control button, .quick-options button { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-weight: 800; padding: 11px 12px; } .practice-tab, .math-skill { display: flex; align-items: center; gap: 10px; text-align: left; } .practice-tab i, .math-skill i { color: var(--teal); font-size: 1.05rem; } .practice-tab.is-active, .math-skill.is-active, .segmented-control button.is-active, .mini-list button.is-active { border-color: var(--teal); background: var(--teal); color: var(--white); } .practice-tab.is-active i, .math-skill.is-active i { color: var(--white); } .segmented-control { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .mini-list button { text-align: left; font-size: 0.88rem; } .practice-workspace { padding: 24px; } .practice-workspace .button-secondary { border-color: var(--line); background: var(--paper); color: var(--ink); } .practice-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; } .practice-toolbar h2 { margin: 0; color: var(--ink); font-family: "Newsreader", Georgia, serif; font-size: 2rem; line-height: 1.05; } .toolbar-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; } .metric-grid div { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 12px; } .metric-grid span { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; } .metric-grid strong { display: block; color: var(--ink); font-size: 1.55rem; line-height: 1.15; } .race-track { position: relative; height: 22px; border-radius: var(--radius); background: rgba(16, 32, 39, 0.08); margin-bottom: 22px; overflow: hidden; } .race-track span { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(196, 134, 60, 0.55); transition: width 120ms ease; } .race-track i { position: absolute; top: 50%; left: 0; color: var(--teal-dark); font-size: 1.25rem; transform: translateY(-50%); transition: left 120ms ease; } .typing-display { min-height: 190px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink-2); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 1.05rem; line-height: 1.9; padding: 22px; white-space: pre-wrap; } .typing-display span { border-radius: 3px; } .typing-display .is-current { background: rgba(196, 134, 60, 0.25); } .typing-display .is-correct { color: var(--teal-dark); } .typing-display .is-wrong { background: rgba(191, 91, 69, 0.16); color: var(--clay); } #typing-page-input { min-height: 132px; margin-top: 14px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; } .session-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; color: var(--muted); } .session-summary span { border-radius: var(--radius); background: rgba(31, 111, 104, 0.1); padding: 8px 10px; } .session-summary strong { color: var(--ink); } .compact-section { padding-top: 64px; padding-bottom: 72px; } .example-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: min(var(--max), 100%); margin: 0 auto; } .example-grid article { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); padding: 22px; } .example-grid span { color: var(--teal-dark); font-size: 0.82rem; font-weight: 800; text-transform: uppercase; } .example-grid p { margin: 10px 0 0; color: var(--muted); } .math-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .math-skill { min-height: 68px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; } .math-board { display: grid; gap: 14px; } .math-context { margin: 0; color: var(--muted); font-weight: 700; } .math-problem { display: grid; place-items: center; min-height: 180px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-family: "Newsreader", Georgia, serif; font-size: 4.6rem; font-weight: 700; line-height: 1; text-align: center; padding: 20px; } .answer-form { display: grid; grid-template-columns: 1fr 52px; gap: 10px; } .quick-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .quick-options button { background: var(--white); } .solution-line { min-height: 28px; margin: 0; color: var(--muted); font-weight: 700; } .math-map { grid-template-columns: repeat(3, minmax(0, 1fr)); } .publication-list { display: grid; gap: 14px; } .publication-list article { padding: 22px; } .publication-list span { color: var(--clay); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; } .publication-list h3 { margin-top: 8px; } .publication-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 18px; width: min(var(--max), 100%); margin: 0 auto; } .pub-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); padding: 24px; transition: transform 220ms ease, box-shadow 220ms ease; } .pub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .pub-card-featured { grid-column: span 3; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; column-gap: 32px; background: var(--ink); color: var(--white); } .pub-card-featured .pub-meta { grid-column: 1; } .pub-card-featured h3 { grid-column: 1; color: var(--white); font-size: 1.45rem; } .pub-card-featured p { grid-column: 1; color: rgba(255, 255, 255, 0.72); } .pub-card-featured .text-action { grid-column: 1; color: var(--gold); border-bottom-color: rgba(196, 134, 60, 0.5); margin-top: auto; } .pub-card-cta { grid-column: span 3; flex-direction: row; align-items: center; gap: 22px; background: rgba(31, 111, 104, 0.06); border-color: rgba(31, 111, 104, 0.2); } .pub-card-cta > i { flex-shrink: 0; font-size: 2rem; color: var(--teal); } .pub-card-cta > div { flex: 1; } .pub-card-cta h3 { margin: 0 0 4px; color: var(--ink); } .pub-card-cta p { color: var(--muted); margin: 0; } .pub-card-cta .button { flex-shrink: 0; margin-top: 0; } @media (max-width: 640px) { .pub-card-cta { grid-column: span 1; flex-direction: column; align-items: flex-start; } .pub-card-cta .button { margin-top: 14px; } } .pub-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .pub-tag, .nota-tag { display: inline-flex; align-items: center; border-radius: var(--radius); font-size: 0.72rem; font-weight: 800; padding: 5px 9px; text-transform: uppercase; } .pub-tag { background: rgba(191, 91, 69, 0.1); color: var(--clay); } .nota-tag-economia { background: rgba(31,111,104,0.1); color: var(--teal-dark); } .nota-tag-tecnologia { background: rgba(16,32,39,0.08); color: var(--ink); } .nota-tag-crecimiento{ background: rgba(97,114,79,0.12); color: var(--olive); } .nota-tag-hobbies { background: rgba(196,134,60,0.12); color: #8a5c1e; } .nota-tag-recursos { background: rgba(191,91,69,0.1); color: var(--clay); } .pub-date { color: var(--muted); font-size: 0.82rem; font-weight: 600; } .pub-card h3 { margin: 0 0 10px; color: var(--ink); font-size: 1.04rem; line-height: 1.3; } .pub-card p { margin: 0 0 18px; color: var(--muted); font-size: 0.94rem; flex: 1; } .pub-card .text-action { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; } @media (max-width: 900px) { .publication-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pub-card-featured { grid-column: span 2; display: flex; flex-direction: column; } } @media (max-width: 640px) { .publication-grid { grid-template-columns: 1fr; } .pub-card-featured { grid-column: span 1; } } /* ── Recursos section ── */ .res-tabs { display: flex; gap: 10px; width: min(var(--max), 100%); margin: 0 auto 28px; } .res-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); font-size: 0.94rem; font-weight: 800; padding: 10px 18px; transition: border-color 180ms ease, background 180ms ease, color 180ms ease; } .res-tab i { font-size: 1.05rem; color: var(--teal); transition: color 180ms ease; } .res-tab.is-active { border-color: var(--teal); background: var(--teal); color: var(--white); } .res-tab.is-active i { color: var(--white); } .res-tab:hover:not(.is-active) { border-color: var(--teal); color: var(--teal-dark); } .res-panels { width: min(var(--max), 100%); margin: 0 auto; } .res-panel { display: none; } .res-panel.is-active { display: block; } .res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .res-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: 16px; row-gap: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); padding: 22px; transition: transform 220ms ease, box-shadow 220ms ease; } .res-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .res-card > i { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; align-self: start; width: 44px; height: 44px; border-radius: var(--radius); background: rgba(31, 111, 104, 0.1); color: var(--teal); font-size: 1.25rem; } .res-card > div { grid-column: 2; grid-row: 1 / 3; } .res-card h3 { margin: 0 0 6px; color: var(--ink); font-size: 1rem; line-height: 1.3; } .res-card p { margin: 0; color: var(--muted); font-size: 0.92rem; } .res-link { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; width: fit-content; border-bottom: 2px solid rgba(196, 134, 60, 0.6); color: var(--teal-dark); font-size: 0.88rem; font-weight: 800; padding-bottom: 2px; transition: color 180ms ease, border-color 180ms ease; } .res-link:hover { color: var(--gold); border-bottom-color: var(--gold); } .res-card-add { border-style: dashed; background: transparent; box-shadow: none; } .res-card-add > i { background: rgba(196, 134, 60, 0.1); color: var(--gold); } .res-card-add .res-link { color: var(--gold); border-bottom-color: rgba(196, 134, 60, 0.4); } @media (max-width: 900px) { .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .res-tabs { flex-direction: column; } .res-grid { grid-template-columns: 1fr; } } /* ── end Recursos section ── */ .pytronic-band { padding: 82px clamp(18px, 6vw, 76px); background: var(--ink); color: var(--white); } .pytronic-content { width: min(900px, 100%); margin: 0 auto; text-align: center; } .pytronic-content h2 { color: var(--white); } .pytronic-content p:not(.eyebrow) { color: rgba(255, 255, 255, 0.72); } .pytronic-content .button { margin-top: 18px; } .contact-section { background: var(--paper); } .contact-grid { align-items: start; } .contact-section .section-heading { margin: 0; text-align: left; } /* ── Contact v2 (with form) ── */ .contact-grid-v2 { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr); gap: 48px; width: min(var(--max), 100%); margin: 0 auto; align-items: start; } .contact-grid-v2 h2 { margin: 8px 0 14px; color: var(--ink); font-family: "Newsreader", Georgia, serif; font-size: 2rem; line-height: 1.05; } .contact-grid-v2 > div > p:not(.eyebrow) { color: var(--muted); font-size: 1rem; margin: 0 0 24px; } .contact-grid-v2 .contact-panel { margin-top: 0; } .contact-form-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); padding: 28px; } .contact-form-wrap h3 { margin: 6px 0 22px; color: var(--ink); font-size: 1.1rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .form-group label { color: var(--ink); font-size: 0.86rem; font-weight: 700; } .form-group select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); font: inherit; padding: 12px 13px; outline: none; cursor: pointer; } .form-group select:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(31, 111, 104, 0.12); } .contact-submit { width: 100%; margin-top: 6px; } .contact-feedback { min-height: 24px; margin: 12px 0 0; font-size: 0.88rem; font-weight: 700; text-align: center; } .contact-feedback.is-ok { color: var(--teal-dark); } .contact-feedback.is-err { color: var(--clay); } .contact-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } @media (max-width: 900px) { .contact-grid-v2 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } .contact-panel { display: grid; gap: 10px; padding: 12px; } .contact-link { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; border-radius: var(--radius); padding: 16px; transition: background 180ms ease, transform 180ms ease; } .contact-link:hover, .contact-link:focus-visible { background: var(--paper); transform: translateY(-2px); outline: none; } .contact-link i, .social-strip a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius); background: rgba(31, 111, 104, 0.1); color: var(--teal); font-size: 1.15rem; } .contact-link strong, .contact-link small { display: block; } .contact-link small { color: var(--muted); } .social-strip { display: flex; gap: 10px; border-top: 1px solid var(--line); margin-top: 6px; padding: 18px 16px 8px; } .social-strip a:hover, .social-strip a:focus-visible { background: var(--teal); color: var(--white); outline: none; } .site-footer { padding: 26px clamp(18px, 6vw, 76px); background: var(--ink); color: rgba(255, 255, 255, 0.72); } .footer-main { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; width: min(var(--max), 100%); margin: 0 auto; } .site-footer p { margin: 0; } .site-footer a { color: var(--gold); font-weight: 800; transition: color 160ms ease; } .site-footer a:hover { color: #d49e58; } .footer-links { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; flex-wrap: wrap; } .footer-sep { color: rgba(255, 255, 255, 0.32); } @media (max-width: 640px) { .footer-main { flex-direction: column; align-items: flex-start; } } .reveal { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .hero .reveal, .section-intro .reveal { opacity: 1; transform: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* Subimos el breakpoint a 1200px porque ahora el nav tiene 7 items */ @media (max-width: 1200px) { .site-nav, .header-cta { display: none; } .menu-button { display: inline-flex; } .site-nav { position: fixed; top: var(--header); right: 18px; left: 18px; display: none; flex-direction: column; align-items: stretch; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius); background: rgba(16, 32, 39, 0.97); padding: 10px; box-shadow: var(--shadow); } body.nav-open .site-nav { display: flex; } .site-nav a { padding: 14px; } .nav-language-mobile { display: flex; border-top: 1px solid rgba(255, 255, 255, 0.14); gap: 8px; margin-top: 6px; padding: 12px 4px 4px; } .nav-language-mobile .lang-button { flex: 1; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); } .services-grid, .lab-grid, .example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .practice-layout, .math-layout { grid-template-columns: 1fr; } .practice-sidebar { position: static; } } @media (max-width: 900px) { .hero { min-height: auto; padding-top: 120px; background-image: linear-gradient(180deg, rgba(16, 32, 39, 0.82), rgba(16, 32, 39, 0.94)), url("../img/profile-img-2026.jpg"); background-position: center top; } .hero h1 { font-size: 3.6rem; } .hero-lede { font-size: 1.08rem; } .hero-proof, .section-grid, .split-layout, .contact-grid, .signal-list { grid-template-columns: 1fr; } .section-heading h2, .section-kicker h2, .pytronic-content h2, .practice-hero h1 { font-size: 2.35rem; } .practice-hero { padding: 74px 18px 56px; } .metric-grid, .quick-options, .math-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } .math-problem { font-size: 3.4rem; } .section { padding-top: 68px; padding-bottom: 68px; } .resource-row { grid-template-columns: auto 1fr; } .resource-row a { grid-column: 2; } .lab-section { background-attachment: scroll; } } @media (max-width: 640px) { :root { --header: 70px; } .site-header { display: grid; /* brand | acciones — mismas filas, no apiladas */ grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-left: 14px; /* reserva espacio para el menu-button que va position:fixed arriba a la derecha */ padding-right: 64px; } .brand, .brand-copy { min-width: 0; } .brand-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-actions { display: flex; align-items: center; gap: 6px; /* sin justify-self: end — la grid ya lo coloca en la 2.ª columna */ } .menu-button { position: fixed; top: 14px; right: 14px; z-index: 1001; } .brand-copy small { display: none; } .hero { padding: 84px 18px 34px; } .hero h1 { font-size: 2.55rem; overflow-wrap: anywhere; } .hero-actions { display: grid; gap: 10px; margin-top: 24px; } .header-actions > .language-switcher { display: none; } .hero-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; } .hero-proof div { padding-top: 10px; } .hero-proof dt { font-size: 0.9rem; } .hero-proof dd { font-size: 0.74rem; line-height: 1.35; } .services-grid, .project-grid, .lab-grid, .example-grid { grid-template-columns: 1fr; } .project-featured { grid-column: span 1; } .section-heading { text-align: left; } .section-heading h2, .section-kicker h2, .pytronic-content h2, .practice-hero h1 { font-size: 2rem; } .practice-section { padding: 30px 18px 58px; } .practice-workspace, .practice-sidebar { padding: 16px; } .practice-toolbar { align-items: flex-start; flex-direction: column; } .toolbar-actions, .toolbar-actions .button { width: 100%; } .metric-grid, .math-category-grid, .quick-options { grid-template-columns: 1fr; } .typing-display { min-height: 160px; font-size: 0.96rem; padding: 16px; } .math-problem { min-height: 150px; font-size: 2.7rem; } .quiz-tabs { grid-template-columns: 1fr; } .site-footer { flex-direction: column; } } /* ══════════════════════════════════════════════════════════════ Share-link: botón flotante + toast ══════════════════════════════════════════════════════════════ */ .share-fab { position: fixed; bottom: 20px; right: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: 0.92rem; box-shadow: 0 14px 32px rgba(16, 32, 39, 0.16); cursor: pointer; z-index: 100; transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease; } .share-fab:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(16, 32, 39, 0.2); background: var(--teal); color: var(--white); border-color: var(--teal); } .share-fab:hover i { color: var(--white); } .share-fab i { color: var(--teal); font-size: 1rem; transition: color 200ms ease; } .share-fab:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .share-toast { position: fixed; bottom: 80px; right: 20px; padding: 12px 18px; border-radius: 8px; background: #102027; color: #ffffff; font-family: "Inter", system-ui, sans-serif; font-size: 0.9rem; font-weight: 600; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28); z-index: 200; opacity: 0; transform: translateY(20px); transition: opacity 220ms ease, transform 220ms ease; max-width: calc(100vw - 40px); pointer-events: none; } .share-toast.is-visible { opacity: 1; transform: translateY(0); } .share-toast.is-success { background: var(--teal); } .share-toast.is-info { background: var(--ink); } @media (max-width: 640px) { .share-fab { bottom: 14px; right: 14px; padding: 10px 14px; font-size: 0.86rem; } .share-fab span { display: none; } .share-fab i { font-size: 1.1rem; } .share-toast { bottom: 72px; right: 14px; left: 14px; text-align: center; } } /* ══════════════════════════════════════════════════════════════ Extras: menú flotante (guardar/cargar/imprimir) + modal ══════════════════════════════════════════════════════════════ */ .extras-fab { position: fixed; bottom: 20px; right: 184px; /* a la izquierda del share-fab */ display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: 0 14px 32px rgba(16, 32, 39, 0.16); cursor: pointer; z-index: 100; transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease; } .extras-fab i { font-size: 1.15rem; color: var(--muted); transition: color 200ms ease; } .extras-fab:hover { transform: translateY(-2px); background: var(--paper-2); } .extras-fab:hover i { color: var(--ink); } .extras-menu { position: fixed; bottom: 76px; right: 184px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px rgba(16, 32, 39, 0.18); min-width: 220px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease; z-index: 99; } .extras-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); } .extras-menu button { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: none; background: transparent; color: var(--ink); font: inherit; font-size: 0.92rem; font-weight: 600; text-align: left; border-radius: 6px; cursor: pointer; transition: background 140ms ease; } .extras-menu button:hover { background: var(--paper-2); } .extras-menu button i { color: var(--teal); font-size: 1rem; flex-shrink: 0; } /* Modal de escenarios guardados */ .extras-modal-overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(16, 32, 39, 0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1000; animation: extrasFade 200ms ease; } @keyframes extrasFade { from { opacity: 0; } to { opacity: 1; } } .extras-modal { width: min(520px, 100%); max-height: 80vh; display: flex; flex-direction: column; background: var(--white); border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32); overflow: hidden; } .extras-modal header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); } .extras-modal header h3 { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 1.2rem; color: var(--ink); } .extras-modal-close { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: var(--muted); cursor: pointer; transition: all 160ms ease; } .extras-modal-close:hover { background: var(--paper-2); color: var(--ink); } .extras-saved-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; } .extras-saved-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px; align-items: stretch; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 6px; overflow: hidden; background: var(--paper); } .extras-saved-list li:last-child { margin-bottom: 0; } .extras-saved-load { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px; border: none; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: background 160ms ease; } .extras-saved-load:hover { background: var(--paper-2); } .extras-saved-load strong { font-size: 0.96rem; font-weight: 700; } .extras-saved-load span { font-size: 0.78rem; color: var(--muted); font-weight: 500; } .extras-saved-del { display: grid; place-items: center; width: 44px; border: none; border-left: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; transition: all 160ms ease; } .extras-saved-del:hover { background: color-mix(in srgb, var(--clay) 12%, transparent); color: var(--clay); } .extras-modal-hint { margin: 0; padding: 14px 22px 18px; background: var(--paper-2); color: var(--muted); font-size: 0.82rem; border-top: 1px solid var(--line); } /* Responsive */ @media (max-width: 640px) { .extras-fab { right: 72px; bottom: 14px; width: 40px; height: 40px; } .extras-menu { right: 14px; left: 14px; bottom: 64px; } } /* ══════════════════════════════════════════════════════════════ Estilos de impresión (cuando el usuario hace Imprimir / PDF) ══════════════════════════════════════════════════════════════ */ @media print { .site-header, .skip-link, .share-fab, .extras-fab, .extras-menu, .share-toast, .cookies-banner, .site-footer, .calc-card-actions, .calc-hero, nav.tools-breadcrumb { display: none !important; } body { background: white !important; color: black !important; } main, .calc-section, .calc-results, .calc-card { background: white !important; color: black !important; box-shadow: none !important; border-color: #ddd !important; page-break-inside: avoid; } .calc-grid { display: block !important; } .calc-sidebar { margin-bottom: 24px; page-break-inside: avoid; } .calc-explainer { page-break-before: auto; } a[href]::after { content: "" !important; } h1, h2, h3 { page-break-after: avoid; } .metric-card, .ticker-card { border: 1px solid #ccc !important; background: white !important; } .calc-chart-card svg { max-width: 100%; height: auto; } } /* ══════════════════════════════════════════════════════════════ Página /sobre — landing personal ══════════════════════════════════════════════════════════════ */ .sobre-hero { background: linear-gradient(135deg, rgba(16,32,39,0.96) 0%, rgba(31,111,104,0.94) 100%), url("../img/hero-bg.jpg") center / cover; color: var(--white); padding: 96px clamp(18px, 7vw, 88px) 80px; } .sobre-hero-inner { width: min(820px, 100%); } .sobre-hero .eyebrow { color: var(--gold); margin: 0 0 12px; } .sobre-hero h1 { margin: 0 0 18px; font-family: "Newsreader", Georgia, serif; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; color: var(--white); } .sobre-lede { font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,0.85); margin: 0 0 28px; max-width: 700px; } .sobre-quick-facts { display: flex; flex-wrap: wrap; gap: 12px; } .sobre-quick-facts span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; font-size: 0.86rem; font-weight: 600; color: var(--white); } .sobre-quick-facts i { color: var(--gold); } /* Secciones */ .sobre-section { padding: 72px clamp(18px, 6vw, 76px); background: var(--paper); } .sobre-section-alt { background: var(--paper-2); } .sobre-section-cta { background: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--gold) 8%, var(--paper)) 100%); } .sobre-section-inner { width: min(840px, 100%); margin: 0 auto; } .sobre-section .eyebrow { margin: 0 0 8px; } .sobre-section h2 { margin: 0 0 20px; font-family: "Newsreader", Georgia, serif; font-size: clamp(1.6rem, 3.2vw, 2.2rem); color: var(--ink); line-height: 1.18; } .sobre-section p { color: var(--ink); font-size: 1.02rem; line-height: 1.65; margin: 0 0 14px; } .sobre-section p:last-child { margin-bottom: 0; } /* Links de texto inline en .sobre-section - excluyendo .button (que tiene su propio estilo) y enlaces dentro de la cabecera/pies estructurales. */ .sobre-section a:not(.button):not(.footer-brand):not(.tools-home-cat-link) { color: var(--teal-dark); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } [data-theme="dark"] .sobre-section a:not(.button):not(.footer-brand):not(.tools-home-cat-link) { color: var(--teal); } .sobre-section a:not(.button):not(.footer-brand):not(.tools-home-cat-link):hover { color: var(--gold); } /* Pilares (a qué me dedico) */ .sobre-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 24px; } .sobre-pillar { padding: 26px 24px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-soft); } .sobre-pillar-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--c, var(--teal)) 14%, transparent); color: var(--c, var(--teal)); font-size: 1.3rem; margin-bottom: 14px; } .sobre-pillar h3 { margin: 0 0 10px; color: var(--ink); font-family: "Inter", system-ui, sans-serif; font-size: 1.05rem; font-weight: 800; } .sobre-pillar p { margin: 0; color: var(--ink-2); font-size: 0.94rem; line-height: 1.55; } @media (max-width: 720px) { .sobre-pillars { grid-template-columns: 1fr; } } /* Principios */ .sobre-principles { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; } .sobre-principles article { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 22px; align-items: start; } .sobre-principle-num { font-family: "Newsreader", Georgia, serif; font-size: 2.4rem; font-weight: 700; color: var(--teal); line-height: 1; } /* Wrapper de h3+p — segunda columna del grid. min-width:0 es indispensable: sin él, el texto largo fuerza el ancho de la columna y rompe el grid (texto apilado vertical en 80px). */ .sobre-principle-body { min-width: 0; } .sobre-principle-body h3 { margin: 4px 0 8px; color: var(--ink); font-size: 1.15rem; font-weight: 800; font-family: "Inter", system-ui, sans-serif; line-height: 1.3; } .sobre-principle-body p { margin: 0; color: var(--ink-2); font-size: 0.98rem; line-height: 1.6; } @media (max-width: 640px) { .sobre-principles article { grid-template-columns: 1fr; gap: 8px; } .sobre-principle-num { font-size: 1.8rem; } } /* Stack técnico */ .sobre-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; } .sobre-stack > div { padding: 20px 22px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; } .sobre-stack h4 { margin: 0 0 12px; color: var(--ink); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .sobre-stack ul { list-style: none; margin: 0; padding: 0; } .sobre-stack li { padding: 6px 0; font-size: 0.92rem; color: var(--ink-2); border-bottom: 1px dashed var(--line); } .sobre-stack li:last-child { border-bottom: none; } .sobre-stack li strong { color: var(--ink); font-weight: 700; } @media (max-width: 720px) { .sobre-stack { grid-template-columns: 1fr; } } /* Proceso de trabajo */ .sobre-process { margin: 22px 0 28px; padding-left: 20px; } .sobre-process li { padding: 8px 0; color: var(--ink-2); font-size: 0.98rem; line-height: 1.55; } .sobre-process strong { color: var(--ink); } .sobre-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } /* ══════════════════════════════════════════════════════════════ Newsletter widget reutilizable ══════════════════════════════════════════════════════════════ */ .newsletter-widget { margin: 0; } .nl-widget-inner { padding: 28px 28px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); display: grid; gap: 22px; } @media (min-width: 720px) { .nl-widget-inner { grid-template-columns: 1fr 1fr; align-items: center; padding: 32px 36px; } } .nl-widget-text h3 { margin: 0 0 8px; color: var(--ink); font-family: "Newsreader", Georgia, serif; font-size: 1.35rem; line-height: 1.2; } .nl-widget-text p { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.55; } .nl-widget-form { display: flex; flex-direction: column; gap: 8px; } .nl-widget-row { display: flex; gap: 8px; } .nl-widget-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; } .nl-widget-input { flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-size: 0.95rem; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; } .nl-widget-input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(31, 111, 104, 0.14); } .nl-widget-button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: none; border-radius: 8px; background: var(--teal); color: var(--white); font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; transition: background 160ms ease, transform 160ms ease; white-space: nowrap; } .nl-widget-button:hover:not(:disabled) { background: var(--teal-dark); transform: translateY(-1px); } .nl-widget-button:disabled { opacity: 0.6; cursor: wait; } .nl-widget-feedback { margin: 4px 0 0; font-size: 0.86rem; font-weight: 600; min-height: 1.2em; } .nl-widget-feedback.is-success { color: var(--teal); } .nl-widget-feedback.is-error { color: var(--clay); } @media (max-width: 540px) { .nl-widget-row { flex-direction: column; } } /* ══════════════════════════════════════════════════════════════ Footer rico (inyectado por footer-enhance.js) ══════════════════════════════════════════════════════════════ */ .site-footer { padding: 0; } .footer-rich-wrap { padding: 56px clamp(18px, 6vw, 76px) 32px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-rich-grid { display: grid; grid-template-columns: 1.4fr 2fr 1.6fr; gap: 42px; width: min(var(--max), 100%); margin: 0 auto; } @media (max-width: 980px) { .footer-rich-grid { grid-template-columns: 1fr; gap: 36px; } } /* Columna brand */ .footer-brand { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 14px; text-decoration: none; color: var(--white); } .footer-brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--gold); color: var(--ink); font-weight: 800; font-size: 1rem; letter-spacing: 0.02em; } .footer-brand strong { display: block; font-size: 1.05rem; color: var(--white); font-weight: 800; } .footer-brand small { color: rgba(255,255,255,0.55); font-size: 0.82rem; } .footer-brand-col > p { margin: 6px 0 18px; color: rgba(255,255,255,0.68); font-size: 0.92rem; line-height: 1.55; max-width: 360px; } .footer-social { display: flex; gap: 10px; } .footer-social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.78); font-size: 1rem; font-weight: 400; text-decoration: none; transition: all 180ms ease; } .footer-social a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); transform: translateY(-2px); } /* Columnas de enlaces */ .footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } @media (max-width: 700px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .footer-cols { grid-template-columns: 1fr; } } .footer-col h4 { margin: 0 0 14px; color: var(--white); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { padding: 4px 0; } .footer-col a { color: rgba(255,255,255,0.68); font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: color 160ms ease; } .footer-col a:hover { color: var(--gold); } /* Columna newsletter */ .footer-newsletter-col h4 { margin: 0 0 8px; color: var(--white); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .footer-newsletter-col > p { margin: 0 0 14px; color: rgba(255,255,255,0.66); font-size: 0.88rem; line-height: 1.5; } /* Variante compacta del newsletter widget (sin doble cabecera) */ .newsletter-widget-compact .nl-widget-inner { grid-template-columns: 1fr !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; gap: 0 !important; } .newsletter-widget-compact .nl-widget-text { display: none; } .newsletter-widget-compact .nl-widget-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: var(--white); } .newsletter-widget-compact .nl-widget-input::placeholder { color: rgba(255,255,255,0.42); } .newsletter-widget-compact .nl-widget-input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(196, 134, 60, 0.16); } .newsletter-widget-compact .nl-widget-button { background: var(--gold); color: var(--ink); } .newsletter-widget-compact .nl-widget-button:hover:not(:disabled) { background: #d49e58; } .newsletter-widget-compact .nl-widget-feedback { color: rgba(255,255,255,0.72); } /* Footer bottom (lo que ya estaba: copyright + link) */ .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px clamp(18px, 6vw, 76px); width: min(var(--max), 100%); margin: 0 auto; color: rgba(255,255,255,0.54); font-size: 0.84rem; } .footer-bottom a { color: var(--gold); font-weight: 700; text-decoration: none; } .footer-bottom a:hover { color: #d49e58; } @media (max-width: 540px) { .footer-bottom { flex-direction: column; text-align: center; gap: 8px; } } /* ══════════════════════════════════════════════════════════════ POLISH FINAL — focus visible global + arreglos dark mode ══════════════════════════════════════════════════════════════ */ /* Focus visible consistente — accesibilidad */ *:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; } a:focus-visible, button:focus-visible { outline-offset: 3px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; } /* En dark mode: focus más vivo para mejor visibilidad */ [data-theme="dark"] *:focus-visible { outline-color: var(--gold); } /* Calc-tabla en dark mode: hover sutil */ [data-theme="dark"] .calc-table tr:hover td { background: rgba(255, 255, 255, 0.02); } /* Las tarjetas .tool-card en dark mode: borde hover más visible */ [data-theme="dark"] .tool-card:not(.tool-card-soon):hover { border-color: rgba(77, 173, 171, 0.45); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45); } /* Hero overlays — uniformar opacidad de breadcrumbs en dark */ [data-theme="dark"] .tools-breadcrumb a, [data-theme="dark"] .nota-breadcrumb a { color: rgba(255, 255, 255, 0.74); } [data-theme="dark"] .tools-breadcrumb li, [data-theme="dark"] .nota-breadcrumb li { color: rgba(255, 255, 255, 0.66); } [data-theme="dark"] .tools-breadcrumb li[aria-current="page"], [data-theme="dark"] .nota-breadcrumb li[aria-current="page"] { color: #fff; } /* Mejora el contraste de la card de "destacada" featured en dark mode */ [data-theme="dark"] .tool-card-featured { background: linear-gradient(135deg, var(--white) 0%, rgba(77, 173, 171, 0.08) 100%); border-color: rgba(77, 173, 171, 0.28); } /* Suaviza la transición visual hero → siguiente sección en dark mode añadiendo un degradado en la parte baja del hero. */ [data-theme="dark"] .hero::before, [data-theme="dark"] .sobre-hero::before, [data-theme="dark"] .tools-hero::before, [data-theme="dark"] .calc-hero::before, [data-theme="dark"] .nota-article-hero::before { content: ""; position: absolute; inset: auto 0 0 0; height: 60px; background: linear-gradient(180deg, transparent, var(--paper)); pointer-events: none; z-index: 1; } [data-theme="dark"] .hero, [data-theme="dark"] .sobre-hero, [data-theme="dark"] .tools-hero, [data-theme="dark"] .calc-hero, [data-theme="dark"] .nota-article-hero { position: relative; } /* Suavizar la transición hero → siguiente sección en dark mode. El hero termina en #102027 y el body es #0e1a1f — la pequeña diferencia crea una "línea" visible. Usamos un ::before que añade una franja sutil de transición SIN sobreescribir el background propio de la sección (importante para .section-alt y similares). */ [data-theme="dark"] .hero + section, [data-theme="dark"] .sobre-hero + section, [data-theme="dark"] .tools-hero + section, [data-theme="dark"] .calc-hero + section, [data-theme="dark"] .nota-article-hero + section, [data-theme="dark"] .est-hero + section, [data-theme="dark"] .notas-hero + section, [data-theme="dark"] .legal-hero + section { position: relative; } [data-theme="dark"] .hero + section::before, [data-theme="dark"] .sobre-hero + section::before, [data-theme="dark"] .tools-hero + section::before, [data-theme="dark"] .calc-hero + section::before, [data-theme="dark"] .nota-article-hero + section::before, [data-theme="dark"] .est-hero + section::before, [data-theme="dark"] .notas-hero + section::before, [data-theme="dark"] .legal-hero + section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 60px; background: linear-gradient(180deg, #102027 0%, transparent 100%); pointer-events: none; z-index: 0; } /* Asegurar que el contenido de la sección quede por encima del ::before */ [data-theme="dark"] .hero + section > *, [data-theme="dark"] .sobre-hero + section > *, [data-theme="dark"] .tools-hero + section > *, [data-theme="dark"] .calc-hero + section > *, [data-theme="dark"] .nota-article-hero + section > *, [data-theme="dark"] .est-hero + section > *, [data-theme="dark"] .notas-hero + section > *, [data-theme="dark"] .legal-hero + section > * { position: relative; z-index: 1; } /* Métricas con .is-positive / .is-negative — refuerzo de color en dark */ [data-theme="dark"] .metric-card.is-positive .metric-value { color: #6dc4c0; /* teal más vivo en dark */ } [data-theme="dark"] .metric-card.is-negative .metric-value { color: #d4795f; } /* ══════════════════════════════════════════════════════════════ Inline y bloques de fórmula - inline: chip sutil con leve background -
: fórmula destacada centrada como card ══════════════════════════════════════════════════════════════ */ /* Code inline (dentro de párrafo, li, etc.) */ .nota-article-content code, .calc-explainer code, .sobre-section code, .cat-intro code, .cat-order code { display: inline; padding: 1px 6px; font-family: "JetBrains Mono", "SF Mono", Consolas, monospace; font-size: 0.86em; background: color-mix(in srgb, var(--teal) 8%, var(--paper-2)); color: var(--ink); border-radius: 4px; border: 1px solid color-mix(in srgb, var(--teal) 10%, transparent); word-spacing: -0.1em; } [data-theme="dark"] .nota-article-content code, [data-theme="dark"] .calc-explainer code, [data-theme="dark"] .sobre-section code, [data-theme="dark"] .cat-intro code, [data-theme="dark"] .cat-order code { background: color-mix(in srgb, var(--teal) 14%, var(--paper-2)); color: var(--ink); border-color: color-mix(in srgb, var(--teal) 22%, transparent); } /* Bloque
— fórmula destacada como card centrada */ .nota-article-content blockquote:has(> code), .calc-explainer blockquote:has(> code) { display: block; margin: 18px 0; padding: 18px 22px; border-left: 3px solid var(--teal); background: color-mix(in srgb, var(--teal) 6%, var(--paper)); border-radius: 0 8px 8px 0; text-align: center; quotes: none; } .nota-article-content blockquote:has(> code)::before, .calc-explainer blockquote:has(> code)::before { content: ""; } .nota-article-content blockquote:has(> code) code, .calc-explainer blockquote:has(> code) code { display: inline-block; background: transparent; border: none; padding: 0; font-size: 1.02rem; font-weight: 600; color: var(--teal-dark); word-spacing: normal; letter-spacing: 0.01em; } [data-theme="dark"] .nota-article-content blockquote:has(> code) code, [data-theme="dark"] .calc-explainer blockquote:has(> code) code { color: var(--teal); }