/* ============================================================ mainf.css — hoja de estilos común de mainf.es Un único sitio donde cambiar el diseño de todo el sitio. Se carga LA ÚLTIMA en el de cada página, de modo que normaliza los estilos heredados de cada plantilla original. Índice 1. Tokens 2. Base y tipografía 3. Enlaces 4. Botones 5. Tarjetas y cajas 6. Tablas 7. Utilidades y accesibilidad ============================================================ */ /* ── 1. Tokens ─────────────────────────────────────────────── */ :root { /* Marca */ --mf-cyan: #0093b8; --mf-cyan-h: #00738f; --mf-cyan-soft: #e8f4f9; --mf-navy: #003A52; --mf-navy-2: #005C7A; /* Neutros (una sola escala: antes convivían slate y gray) */ --mf-900: #0f172a; --mf-800: #1e293b; --mf-700: #334155; --mf-600: #475569; --mf-500: #64748b; --mf-300: #cbd5e1; --mf-200: #e2e8f0; --mf-100: #f1f5f9; --mf-50: #f8fafc; /* Semánticos */ --mf-verde: #16a34a; --mf-verde-h: #15803d; --mf-wa: #25d366; --mf-wa-h: #1da851; --mf-ambar: #fef9c3; --mf-ambar-b: #fde047; --mf-rojo: #dc2626; /* Tipografía */ --mf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mf-h1: clamp(2rem, 4.2vw, 2.875rem); /* 32 → 46 px */ --mf-h2: clamp(1.5rem, 3vw, 2.125rem); /* 24 → 34 px */ --mf-h3: 1.125rem; /* 18 px */ --mf-body: 1.0625rem; /* 17 px */ --mf-lh: 1.7; /* Forma */ --mf-r-sm: .5rem; --mf-r: .75rem; --mf-r-lg: 1rem; --mf-sombra: 0 1px 3px rgba(15,43,61,.06), 0 8px 24px rgba(15,43,61,.06); } /* ── 2. Base y tipografía ──────────────────────────────────── */ body { font-family: var(--mf-font); font-size: var(--mf-body); line-height: var(--mf-lh); color: var(--mf-800); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--mf-font); text-wrap: balance; } h1 { font-size: var(--mf-h1); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--mf-900); } h2 { font-size: var(--mf-h2); font-weight: 800; line-height: 1.22; letter-spacing: -.01em; color: var(--mf-900); } h3 { font-size: var(--mf-h3); font-weight: 700; line-height: 1.35; color: var(--mf-900); } /* Títulos de sección: cada plantilla traía su propia clase */ .section-title, .prose h2, .content-main h2 { font-size: var(--mf-h2); font-weight: 800; line-height: 1.22; letter-spacing: -.01em; color: var(--mf-900); } /* Héroes. Las cuatro plantillas usaban clases distintas para lo mismo: .hero-title / .hero h1, y .hero-sub / .hero-subtitle / .subheadline. */ .hero-title, .hero h1, #hero h1 { font-size: clamp(2.125rem, 4.6vw, 3rem); /* 34 → 48 px */ font-weight: 800; line-height: 1.12; letter-spacing: -.022em; } .hero h1, #hero h1, .hero h2, .hero-title { color: #fff; } .hero-sub, .hero-subtitle, .hero .subheadline, .hero .hero-sub { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); /* 17 → 19 px */ line-height: 1.65; } /* Subtítulos dentro de componentes: iban de 14 a 22 px según la página */ .svc-card h3, .prob-card h3, .case-card h3, .case-study h4, .sidebar-card h3, .sidebar-box h3, .step-content h3, .testi-card h3 { font-size: var(--mf-h3); font-weight: 700; line-height: 1.35; } main p, section p, .prose p, .content-main p { font-size: var(--mf-body); line-height: var(--mf-lh); color: var(--mf-700); } main li, section li, .prose li, .content-main li { font-size: var(--mf-body); line-height: var(--mf-lh); } /* Ancho de lectura cómodo en los bloques de texto largo */ .prose > p, .content-main > p, .prose > ul, .content-main > ul { max-width: 68ch; } /* ── 3. Enlaces ────────────────────────────────────────────── */ main a, section a, footer a, .prose a, .content-main a { text-decoration: none; } main a:not([class]), section a:not([class]), .prose a:not([class]) { color: var(--mf-cyan-h); text-decoration: underline; text-underline-offset: .15em; } main a:not([class]):hover, section a:not([class]):hover, .prose a:not([class]):hover { color: var(--mf-cyan); } /* El menú nunca subraya: lo fija su propio componente */ .mnav a, .mnav-panel a { text-decoration: none !important; } /* ── 4. Botones ────────────────────────────────────────────── */ /* Un solo aspecto para las tres variantes heredadas de las plantillas originales (.btn-primary, .cta-primary, .cta-button.primary). */ .btn, .cta-primary, .cta-secondary, .cta-button, .cta-button.primary, .cta-button.secondary, .sidebar-cta, .btn-primary, .btn-outline, .btn-green, .btn-wa, .btn-white, .mf-btn-primary, .mf-btn-outline, .mf-btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.5rem; border-radius: var(--mf-r-sm); font-family: var(--mf-font); font-size: .95rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none !important; border: 2px solid transparent; cursor: pointer; transition: background .18s, border-color .18s, transform .18s, color .18s; } /* Primario — la acción principal en todo el sitio */ .btn-primary, .cta-primary, .cta-button.primary, .sidebar-cta, .mf-btn-primary { background: var(--mf-cyan); color: #fff !important; border-color: var(--mf-cyan); box-shadow: 0 2px 10px rgba(0,147,184,.28); } .btn-primary:hover, .cta-primary:hover, .cta-button.primary:hover, .sidebar-cta:hover, .mf-btn-primary:hover { background: var(--mf-cyan-h); border-color: var(--mf-cyan-h); transform: translateY(-1px); } /* Secundario — mismo tamaño, sin relleno */ .btn-outline, .cta-secondary, .cta-button.secondary, .mf-btn-outline { background: transparent; color: var(--mf-cyan-h) !important; border-color: var(--mf-300); } .btn-outline:hover, .cta-secondary:hover, .cta-button.secondary:hover, .mf-btn-outline:hover { border-color: var(--mf-cyan); background: var(--mf-cyan-soft); } /* WhatsApp — reconocible, siempre secundario */ .btn-wa, .btn-green, .mf-btn-wa, .hero .mf-btn-wa, .cta-final .mf-btn-wa { background: var(--mf-wa); color: #fff !important; border-color: var(--mf-wa); } .btn-wa:hover, .btn-green:hover, .mf-btn-wa:hover { background: var(--mf-wa-h); border-color: var(--mf-wa-h); transform: translateY(-1px); } /* Sobre fondo oscuro (héroes y cierres): el secundario en cian oscuro resultaba ilegible, así que aquí pasa a blanco translúcido. */ .hero .btn-outline, .hero .cta-secondary, .hero .cta-button.secondary, .cta-final .btn-outline, .cta-final .cta-secondary, .cta-final .cta-button.secondary, .cta-section .cta-button.secondary, .btn-white { background: rgba(255,255,255,.12); color: #fff !important; border-color: rgba(255,255,255,.45); } .hero .btn-outline:hover, .hero .cta-secondary:hover, .hero .cta-button.secondary:hover, .cta-final .btn-outline:hover, .cta-final .cta-secondary:hover, .cta-final .cta-button.secondary:hover, .cta-section .cta-button.secondary:hover, .btn-white:hover { background: rgba(255,255,255,.22); border-color: #fff; } /* ── 5. Tarjetas y cajas ───────────────────────────────────── */ .card, .svc-card, .prob-card, .testi-card, .case-card, .case-study, .sidebar-card, .sidebar-box, .price-card, .content-box { background: #fff; border: 1px solid var(--mf-200); border-radius: var(--mf-r); box-shadow: none; } .faq-item { border: 1px solid var(--mf-200); border-radius: var(--mf-r-sm); background: #fff; } .warn-box, .alert-yellow { background: var(--mf-ambar); border: 1px solid var(--mf-ambar-b); border-radius: var(--mf-r); } /* La tarjeta del hero vive sobre fondo oscuro */ .hcard, .hero-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--mf-r-lg); } /* ── 6. Tablas ─────────────────────────────────────────────── */ main table, section table, .prose table, .pricing-table { border-collapse: collapse; font-size: .95rem; } main th, section th, .prose th { font-weight: 700; text-align: left; } /* ── 7. Utilidades y accesibilidad ─────────────────────────── */ :focus-visible { outline: 2px solid var(--mf-cyan); outline-offset: 2px; border-radius: 3px; } ::selection { background: var(--mf-cyan); color: #fff; } img, svg { max-width: 100%; } @media (max-width: 900px) { .content-grid > *, .content-wrapper > *, .content-main, .prose, .sidebar { min-width: 0; } main table, section table, .prose table, .pricing-table, .table-responsive table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } @media print { .mnav, .mnav-panel, .fab-wa, .whatsapp-fab, .sticky-cta { display: none !important; } }