/* ============================================================ TONI SERNA — BRAND SKIN (override layer) Applies the Toni Serna Design System on top of main.css Tokens: Instrument Serif + Inter Tight + JetBrains Mono Palette: slate ink + electric lime accent (#C6FF3D) Load AFTER main.css. Pair with the new Google Fonts in . ============================================================ */ :root { /* --- Brand --- */ --ts-accent: #C6FF3D; --ts-accent-ink: #0A0A0A; --ts-accent-dim: #7FA82A; --ts-ink-0: #0A0B0D; --ts-ink-1: #111317; --ts-ink-2: #1A1D23; --ts-ink-3: #262A31; --ts-ink-4: #3A3F48; --ts-ink-5: #6A7280; --ts-ink-6: #9AA2AE; --ts-ink-7: #C9CED6; --ts-ink-8: #E6E8EC; --ts-ink-10: #FFFFFF; /* --- Remap existing tokens used across main.css --- */ --color-bg: var(--ts-ink-0); --color-bg-2: var(--ts-ink-1); --color-bg-card: var(--ts-ink-2); --color-border: var(--ts-ink-3); --color-border-hover: var(--ts-accent); --color-green: var(--ts-accent); --color-green-light: #D4FF66; --color-green-dark: var(--ts-accent-dim); --color-green-glow: rgba(198,255,61,.14); --color-purple: var(--ts-accent); --color-purple-light: var(--ts-accent); --color-purple-glow: rgba(198,255,61,.10); --color-text: var(--ts-ink-10); --color-text-muted: var(--ts-ink-6); --color-text-subtle: var(--ts-ink-5); /* Remove the gradients */ --gradient-hero: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(198,255,61,.08) 0%, transparent 60%), var(--ts-ink-0); --gradient-green: var(--ts-accent); --gradient-text: var(--ts-accent); --gradient-card: var(--ts-ink-1); /* --- Typography --- */ --font-display: 'Instrument Serif', 'Playfair Display', Georgia, serif; --font-heading: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; /* --- Shadows (flatter) --- */ --shadow-green: none; --shadow-card: 0 1px 2px rgba(0,0,0,.25); --shadow-elevated: 0 24px 60px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.3); /* --- Radii (softer pills, less rounded panels) --- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; } /* ─── Base ─── */ body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01" 1; } html { scroll-behavior: smooth; } /* Crisper scrollbar */ ::-webkit-scrollbar-thumb { background: var(--ts-ink-4); } ::-webkit-scrollbar-thumb:hover { background: var(--ts-accent); } /* Selection */ ::selection { background: var(--ts-accent); color: var(--ts-accent-ink); } /* Container width — design system uses 1200, current uses 1480. Keep current to avoid layout regressions. */ /* ─── Section labels: mono caps + lime tick ─── */ .section-label { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ts-ink-6); margin-bottom: 20px; } .section-label::before { content: ''; width: 28px; height: 1px; background: var(--ts-accent); border-radius: 0; } /* ─── Section title: Inter Tight 500, large but not bold ─── */ .section-title { font-family: var(--font-heading); font-weight: 500; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.025em; color: var(--color-text); margin-bottom: 16px; } .section-subtitle { font-family: var(--font-body); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; color: var(--color-text-muted); max-width: 640px; } .section-header { margin-bottom: 56px; } /* Editorial flourish: italic words inside section title use the display serif */ .section-title em, .section-title i { font-family: var(--font-display); font-style: italic; color: var(--ts-accent); letter-spacing: -0.03em; font-weight: 400; } /* Drop the gradient text effect — flat white reads better with serif accents */ .gradient-text { background: none !important; -webkit-text-fill-color: var(--color-text) !important; color: var(--color-text) !important; } /* ─── Buttons ─── */ .btn { font-family: var(--font-heading); font-weight: 500; font-size: 14px; letter-spacing: -0.005em; padding: 13px 22px; border-radius: 999px; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; overflow: visible; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--ts-accent); color: var(--ts-accent-ink); box-shadow: none; } .btn-primary:hover { background: #D4FF66; box-shadow: none; color: var(--ts-accent-ink); } .btn-primary::after { display: none; } .btn-outline { background: transparent; color: var(--color-text); border: 1px solid var(--ts-ink-4); backdrop-filter: none; } .btn-outline:hover { border-color: var(--ts-ink-10); color: var(--color-text); background: transparent; } .btn-ghost { color: var(--color-text-muted); padding: 9px 14px; font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; } .btn-ghost:hover { color: var(--ts-accent); } /* ─── Cards (glass + service + plus) — flat slate, lime hover border ─── */ .glass-card { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-lg); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .glass-card:hover { border-color: var(--ts-ink-4); box-shadow: none; transform: none; } /* ─── Navigation ─── */ #navbar { background: rgba(10,11,13,.7); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; } #navbar.scrolled { background: rgba(10,11,13,.92); border-bottom-color: var(--ts-ink-3); } .nav-inner { height: 76px; } .nav-logo-image { height: 36px; } .nav-links a { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ts-ink-6); padding: 8px 12px; border-radius: 0; position: relative; } .nav-links a:hover { color: var(--ts-ink-10); background: transparent; } .nav-links a:hover::after { content:""; position:absolute; left:12px; right:12px; bottom:2px; height:1px; background: var(--ts-accent); } /* ─── Mobile nav ─── */ .mobile-nav-kicker { font-family: var(--font-mono) !important; letter-spacing: 0.18em !important; text-transform: uppercase; font-size: 11px !important; color: var(--ts-ink-6) !important; } .mobile-nav-intro h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -0.03em; } .mobile-link { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.01em; } /* ─── Hero ─── */ #hero { background: var(--gradient-hero); } #hero::before { display: none; } .hero-badge { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ts-ink-7); background: transparent; border: 1px solid var(--ts-ink-3); border-radius: 999px; padding: 7px 14px; } .hero-badge .dot { width: 6px; height: 6px; background: var(--ts-accent); } .hero-headline { font-family: var(--font-heading); font-style: normal; font-weight: 500; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -0.025em; color: var(--color-text); overflow-wrap: normal; word-break: keep-all; hyphens: none; } .hero-headline .line-2 { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ts-ink-7); margin-top: 14px; } .hero-headline em, .hero-headline i { color: var(--ts-accent); font-style: italic; } .hero-sub { font-family: var(--font-body); font-size: clamp(17px, 1.6vw, 20px); color: var(--ts-ink-7); line-height: 1.5; max-width: 640px; } .hero-note, .hero-seo-line, .hero-action-note { font-family: var(--font-body); color: var(--ts-ink-6); font-size: 14px; } .hero-action-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .proof-pill { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts-ink-7); background: transparent; border: 1px solid var(--ts-ink-3); border-radius: 999px; } /* Scroll indicator → mono */ .scroll-indicator { color: var(--ts-ink-5); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; } .scroll-mouse { border-color: var(--ts-ink-4); } .scroll-mouse::before { background: var(--ts-accent); } /* ─── Logos marquee ─── */ .logos-bar { background: var(--ts-ink-0); border-block: 1px solid var(--ts-ink-3); } .logo-item { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts-ink-6); } .logo-item:hover { color: var(--ts-accent); } /* ─── About ─── */ #about::before, #shopify-plus::before, #local-base::before, #results::before { display: none; } .about-experience-badge { background: var(--ts-accent); color: var(--ts-accent-ink); border-radius: 999px; } .about-experience-badge .exp-number { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -0.03em; } .about-experience-badge .exp-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; } .about-photo { border-radius: var(--radius-lg); filter: grayscale(0.05); } .about-text p { color: var(--ts-ink-7); } .about-highlights .highlight-item { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-md); } .about-highlights .highlight-item:hover { border-color: var(--ts-ink-4); } .hi-icon { color: var(--ts-accent); } /* ─── Services ─── */ #services::before { display: none; } .service-card, .insight-card { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-lg); box-shadow: none; } .service-card::before { display: none; } .service-card:hover { border-color: var(--ts-accent); background: var(--ts-ink-1); box-shadow: none; transform: translateY(-2px); } .service-card .service-icon, .insight-card .service-icon { background: var(--ts-ink-2); border: 1px solid var(--ts-ink-3); color: var(--ts-accent); border-radius: 10px; width: 56px; height: 56px; font-size: 28px; display: inline-flex; align-items: center; justify-content: center; } .service-card:hover .service-icon { border-color: var(--ts-accent); background: var(--ts-ink-1); } .service-card:hover .service-icon { background: transparent; } .service-card h3 { font-family: var(--font-heading); font-weight: 500; font-size: 19px; letter-spacing: -0.015em; } .service-card p { color: var(--ts-ink-7); font-size: 14px; line-height: 1.55; } .service-card .card-arrow { color: var(--ts-accent); font-family: var(--font-mono); } .service-card:hover .card-arrow { color: var(--ts-accent); transform: translateX(4px); } .service-card.featured { border-color: var(--ts-accent); } .service-card.featured::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); pointer-events: none; box-shadow: 0 0 0 1px var(--ts-accent) inset; } .insight-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ts-ink-6); } /* ─── Plus / Shopify Plus shell ─── */ .plus-shell { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-lg); } .plus-card { background: var(--ts-ink-2); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-md); } .plus-card h3 { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.015em; } .plus-card p { color: var(--ts-ink-7); } .plus-copy p { color: var(--ts-ink-7); } /* ─── Portfolio marquee ─── */ .portfolio-marquee { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-lg); } .portfolio-logo-card { background: var(--ts-ink-0); border: 1px solid var(--ts-ink-3); } .portfolio-logo-text { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts-ink-7); } /* ─── Fit ─── */ .fit-card { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-lg); } .fit-card-muted { background: transparent; border-color: var(--ts-ink-3); } .fit-card h3 { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.015em; } .fit-list-positive li::marker, .fit-list-positive li::before { color: var(--ts-accent); } /* ─── Results / Metrics / Testimonials ─── */ .results-metrics { background: transparent; border: 0; padding: 0; } .metric-block { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-md); } .metric-number, .metric-block .counter { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--color-text); letter-spacing: -0.03em; } .metric-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ts-ink-6); } .metric-feature-card { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-md); } .metric-feature-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-accent); } .metric-feature-card h3 { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.015em; } .metric-feature-card p { color: var(--ts-ink-7); } .testimonial-card { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-lg); } .testimonial-quote { font-family: var(--font-display); color: var(--ts-accent); font-size: 48px; line-height: 1; } .testimonial-text { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.4; letter-spacing: -0.015em; color: var(--color-text); } .testimonial-footer { border-top: 1px solid var(--ts-ink-3); padding-top: 16px; margin-top: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts-ink-6); } .testimonial-name { color: var(--color-text); font-family: var(--font-mono); } .testimonial-company { color: var(--ts-ink-6); } .testimonial-avatar { background: var(--ts-accent); color: var(--ts-accent-ink); font-family: var(--font-heading); font-weight: 600; } .testimonial-result { font-family: var(--font-mono); color: var(--ts-accent); font-size: 11px; } .testimonial-dot { background: var(--ts-ink-3); } .testimonial-dot.active { background: var(--ts-accent); } /* ─── Local base ─── */ .local-shell { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-lg); } .local-body { color: var(--ts-ink-7); } .local-city-list span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts-ink-7); border: 1px solid var(--ts-ink-3); border-radius: 999px; padding: 6px 12px; } .local-links a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ts-accent); } .local-point { background: var(--ts-ink-2); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-md); color: var(--ts-ink-7); } /* ─── Process ─── */ .process-step { background: transparent; border: 0; border-top: 2px solid var(--ts-ink-10); padding: 18px 12px 0; border-radius: 0; text-align: left; } .process-number-wrap { background: transparent; width: auto; height: auto; margin: 0 0 6px; display: block; } .process-number-wrap::before { display: none; } .process-step:hover .process-number-wrap::before { display: none; } .process-number { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--ts-accent); font-weight: 500; background: none; -webkit-text-fill-color: var(--ts-accent); } .process-step h3 { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.015em; font-size: 18px; margin-top: 6px; text-align: left; } .process-step p { color: var(--ts-ink-7); font-size: 14px; text-align: left; } /* ─── FAQ ─── */ .faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--ts-ink-3); border-radius: 0; padding: 8px 0; } .faq-item:hover { background: transparent; } .faq-question { font-family: var(--font-heading); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; color: var(--color-text); padding: 18px 0; } .faq-icon { color: var(--ts-accent); font-family: var(--font-mono); font-weight: 400; font-size: 18px; } .faq-answer { font-family: var(--font-body); color: var(--ts-ink-7); font-size: 14px; line-height: 1.6; } /* ─── Contact ─── */ .contact-info .section-title { letter-spacing: -0.025em; } .contact-qualifier { font-family: var(--font-body); color: var(--ts-ink-7); } .contact-detail { border-bottom: 1px solid var(--ts-ink-3); } .contact-detail-icon { background: transparent; border: 1px solid var(--ts-ink-3); border-radius: 8px; color: var(--ts-accent); } .cd-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-ink-6); } .contact-detail-text a { color: var(--color-text); } .contact-detail-text a:hover { color: var(--ts-accent); } .linkedin-banner { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-lg); } .linkedin-banner:hover { border-color: var(--ts-accent); } .linkedin-text strong { font-family: var(--font-heading); font-weight: 500; } .linkedin-text span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts-ink-6); } /* Form */ .contact-form-wrap { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-lg); } .form-group label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ts-ink-6); font-weight: 500; } .form-group input, .form-group select, .form-group textarea { background: var(--ts-ink-0); border: 1px solid var(--ts-ink-3); color: var(--color-text); font-family: var(--font-body); border-radius: var(--radius-sm); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--ts-accent); outline: 0; box-shadow: 0 0 0 3px rgba(198,255,61,.12); } .form-privacy, .form-response-time { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ts-ink-6); } .form-error { color: #FF6B6B; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; } .form-success h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; } /* ─── Final CTA ─── */ .final-cta-card { background: var(--ts-ink-1); color: var(--color-text); border: 1px solid var(--ts-accent); border-radius: var(--radius-lg); position: relative; overflow: hidden; } .final-cta-card::before { content:""; position:absolute; right:-120px; top:-120px; width:340px; height:340px; border-radius:50%; background: radial-gradient(circle, rgba(198,255,61,.20), transparent 60%); filter: blur(40px); pointer-events: none; } .final-cta-card .section-label { color: var(--ts-ink-6); } .final-cta-card .section-label::before { background: var(--ts-accent); } .final-cta-card .section-title { color: var(--color-text); font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.025em; font-style: normal; margin-left: auto; margin-right: auto; text-align: center; } .final-cta-card .section-title em, .final-cta-card .section-title i { font-family: var(--font-display); font-style: italic; color: var(--ts-accent); font-weight: 400; letter-spacing: -0.03em; } .final-cta-card .section-subtitle { color: var(--ts-ink-7); margin-left: auto; margin-right: auto; text-align: center; } .final-cta-card { display: flex; flex-direction: column; align-items: center; } .final-cta-card .section-label { justify-content: center; } .final-cta-card .btn { align-self: center; } .final-cta-card .btn-primary { background: var(--ts-accent); color: var(--ts-accent-ink); } .final-cta-card .btn-primary:hover { background: #D4FF66; color: var(--ts-accent-ink); } /* ─── Footer ─── */ #footer { background: var(--ts-ink-0); border-top: 1px solid var(--ts-ink-3); color: var(--ts-ink-6); font-family: var(--font-body); } .footer-brand p { color: var(--ts-ink-7); } .footer-col h3 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text); } .footer-col ul a { color: var(--ts-ink-6); } .footer-col ul a:hover { color: var(--ts-accent); } .footer-bottom { border-top: 1px solid var(--ts-ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ts-ink-6); } .footer-bottom a { color: var(--ts-ink-6); } .footer-bottom a:hover { color: var(--ts-accent); } .social-link { background: transparent; border: 1px solid var(--ts-ink-3); color: var(--ts-ink-7); } .social-link:hover { border-color: var(--ts-accent); color: var(--ts-accent); } /* ─── A11y: texto del footer con contraste AA (antes #6A7280 ≈ 4.06:1) y enlaces distinguibles por algo más que el color (subrayado) ─── */ .footer-bottom p, .footer-bottom span { color: var(--ts-ink-6); } .footer-bottom a { color: var(--ts-ink-7); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .footer-bottom a:hover { color: var(--ts-accent); } /* Admin link: discreto pero con contraste AA (antes opacity:.4 + #6A7280 ≈ 1.6:1). */ .admin-link { opacity: 1 !important; color: var(--ts-ink-6) !important; } /* ─── Service page (page-template.php) ─── */ .service-page-title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(48px, 6.5vw, 96px); letter-spacing: -0.035em; line-height: 0.96; } .service-page-subtitle { font-family: var(--font-body); color: var(--ts-ink-7); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; } .service-page-summary { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-lg); } .service-page-summary h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-ink-6); font-weight: 500; } .service-page-bullets li { color: var(--ts-ink-7); } .service-page-bullets li::marker { color: var(--ts-accent); } .service-page-fit-note { background: var(--ts-ink-2); border-left: 2px solid var(--ts-accent); color: var(--ts-ink-7); font-size: 13px; padding: 14px 18px; } .service-page-card { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-lg); } .service-page-card h2 { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.02em; } .service-page-card p { color: var(--ts-ink-7); } .service-page-qualifier { font-family: var(--font-body); color: var(--ts-ink-7); font-size: 14px; } /* ─── Blog template ─── */ .blog-post-content h1, .blog-post-content h2, .blog-post-content h3 { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.02em; } .blog-post-content h1 em, .blog-post-content h2 em { font-family: var(--font-display); font-style: italic; color: var(--ts-accent); } .blog-post-content p { color: var(--ts-ink-7); } .blog-post-content a { color: var(--ts-accent); } .blog-post-content blockquote { border-left: 2px solid var(--ts-accent); font-family: var(--font-display); font-style: italic; color: var(--color-text); } .blog-post-content code { font-family: var(--font-mono); background: var(--ts-ink-2); border: 1px solid var(--ts-ink-3); color: var(--ts-accent); border-radius: 4px; padding: 2px 6px; } /* ─── Legal pages ─── */ .legal-content h1, .legal-content h2, .legal-content h3 { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.02em; } .legal-content h1 em { font-family: var(--font-display); font-style: italic; color: var(--ts-accent); } .legal-content p, .legal-content li { color: var(--ts-ink-7); } .legal-content a { color: var(--ts-accent); } /* ─── WhatsApp float + cookie consent (preserve function, restyle) ─── */ .wa-float, .whatsapp-float { background: var(--ts-accent) !important; color: var(--ts-accent-ink) !important; box-shadow: 0 8px 24px rgba(198,255,61,.25); } .cookie-consent, #cookie-consent { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); color: var(--ts-ink-7); font-family: var(--font-body); } .cookie-consent a, #cookie-consent a { color: var(--ts-accent); } .cookie-consent .btn, #cookie-consent .btn { font-family: var(--font-heading); } /* ─── Typography refinements at the body level ─── */ p { text-wrap: pretty; } strong, b { font-weight: 600; } /* Drop the heavy Plus Jakarta weight on h1-h6 set by main.css headings using --font-heading var */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.02em; } /* ============================================================ LAYOUT & LEGIBILITY PATCHES Pulen ejecución sin tocar identidad visual: 1) Guardas globales contra overflow y títulos demasiado anchos 2) Testimonios: cuerpo legible, peek lateral en carrusel 3) Insight cards: CTA explícito en la base, jerarquía equilibrada 4) Proceso: una sola línea, contención horizontal real 5) Badge experiencia: compacto y proporcionado ============================================================ */ /* ─── 1) Global: previene overflow lateral y limita títulos ─── */ html, body { overflow-x: clip; } .section-title { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; max-width: 880px; overflow-wrap: break-word; hyphens: manual; } .section-header.centered .section-title { margin-left: auto; margin-right: auto; } .section-header.narrow .section-title { max-width: 760px; } /* ─── 2) Testimonials — Imagen 1 ─── */ .testimonial-card { padding: 28px 28px; display: flex; flex-direction: column; border-radius: var(--radius-md); } .testimonial-quote { font-size: 34px; line-height: 1; margin-bottom: 8px; } .testimonial-text { font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: 15.5px; line-height: 1.65; letter-spacing: -0.005em; color: var(--ts-ink-8); margin: 0 0 22px; flex: 1; text-wrap: pretty; } /* Si el redactor enfatiza con , se queda como detalle editorial */ .testimonial-text em, .testimonial-text i { font-family: var(--font-display); font-style: italic; color: var(--ts-ink-10); letter-spacing: -0.01em; } .testimonial-footer { padding-top: 18px; margin-top: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .testimonial-name { font-size: 12px; letter-spacing: 0.06em; } .testimonial-company { font-size: 11px; letter-spacing: 0.04em; } .testimonial-result { font-size: 10.5px; padding: 5px 11px; letter-spacing: 0.08em; } /* Carrusel — leave a peek of neighbours so el corte no parece roto */ .testimonials-grid { gap: 20px; scroll-padding-inline: 12px; padding-inline: 4px; } @media (min-width: 1025px) { .testimonial-card { min-width: calc((100% - 72px) / 3); flex: 0 0 calc((100% - 72px) / 3); scroll-snap-align: start; } } @media (max-width: 1024px) { .testimonials-grid { gap: 16px; padding-inline: 4px; margin-right: 0; } .testimonial-card { min-width: min(420px, 78%); flex: 0 0 min(420px, 78%); scroll-snap-align: center; padding: 26px 24px; } } @media (max-width: 480px) { .testimonial-card { min-width: 86%; flex-basis: 86%; padding: 24px 22px; } .testimonial-text { font-size: 15px; } } /* Dots — más finos y discretos */ .testimonial-dots { margin-top: 28px; gap: 20px; } .testimonial-dot { width: 6px; height: 6px; box-shadow: none; position: relative; } /* A11y (WCAG 2.5.8): área táctil de 24x24 invisible centrada en el dot. */ .testimonial-dot::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; } .testimonial-dot.active { width: 22px; box-shadow: none; background: var(--ts-accent); } /* ─── 3) Insight cards (blog) — Imagen 2 ─── */ .insight-card { display: flex; flex-direction: column; padding: 26px 24px 22px; min-height: 280px; border-radius: var(--radius-md); } .insight-card .service-icon { width: 44px; height: 44px; font-size: 20px; margin-bottom: 14px; border-radius: 10px; } .insight-card:hover .service-icon { transform: none; } .insight-card .insight-eyebrow { display: block; margin: 0 0 8px; } .insight-card h3 { font-size: 18px; line-height: 1.25; margin: 0 0 10px; letter-spacing: -0.015em; } .insight-card p { font-size: 14px; line-height: 1.55; margin: 0 0 18px; color: var(--ts-ink-7); } /* CTA explícito en la base de la card: «Leer artículo →» */ .insight-card .card-arrow { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--ts-ink-3); display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ts-ink-7); opacity: 1; transform: none; transition: color .15s ease, gap .15s ease, border-color .15s ease; } .insight-card .card-arrow::before { content: "Leer artículo"; } .insight-card:hover .card-arrow { color: var(--ts-accent); gap: 12px; border-top-color: var(--ts-ink-4); opacity: 1; transform: none; } /* ─── 4) Process section — Imagen 3 ─── */ #process { overflow: hidden; } #process .container { max-width: 1180px; } .process-grid { grid-template-columns: repeat(4, 1fr); gap: 32px 28px; max-width: 1100px; margin-inline: auto; } .process-grid::before { display: none; } /* eliminamos la línea central */ .process-step { padding: 22px 0 0; border-top: 1px solid var(--ts-ink-3); transition: border-color .2s ease; } .process-step:hover { border-top-color: var(--ts-accent); } .process-number-wrap { margin: 0 0 10px; width: auto; height: auto; } .process-number { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; font-weight: 500; color: var(--ts-accent); } .process-step h3 { font-size: 17px; line-height: 1.25; margin: 6px 0 8px; } .process-step p { font-size: 14px; line-height: 1.55; color: var(--ts-ink-7); } @media (max-width: 1024px) { .process-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; } } @media (max-width: 600px) { .process-grid { grid-template-columns: 1fr; gap: 20px; } } /* ─── 5) About experience badge — Imagen 4 ─── */ .about-experience-badge { position: absolute; bottom: 18px; right: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: var(--ts-accent); color: var(--ts-accent-ink); border: 0; box-shadow: 0 8px 22px rgba(198, 255, 61, 0.18); text-align: left; } .about-experience-badge .exp-number { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: -0.02em; color: var(--ts-accent-ink); background: none; -webkit-background-clip: initial; -webkit-text-fill-color: currentColor; margin: 0; } .about-experience-badge .exp-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-accent-ink); opacity: .78; margin: 0; max-width: 14ch; line-height: 1.2; } @media (max-width: 1024px) { .about-experience-badge { bottom: 14px; right: 14px; padding: 8px 14px; gap: 9px; } .about-experience-badge .exp-number { font-size: 20px; } .about-experience-badge .exp-label { font-size: 9px; } } @media (max-width: 480px) { .about-experience-badge { bottom: 10px; right: 10px; padding: 7px 12px; gap: 8px; } .about-experience-badge .exp-number { font-size: 18px; } } /* Foto: garantía de bordes consistentes con la skin (no recorte raro) */ .about-photo { border-radius: var(--radius-md); } /* ─── 6) Portfolio logos — visibles sobre fondo oscuro ─── */ /* La tarjeta ya es oscura (ts-ink-0); revertimos el filter pensado para fondo blanco */ .portfolio-logo-card { background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); box-shadow: none; } .portfolio-logo-image { filter: brightness(0) invert(1); opacity: 0.7; transition: opacity var(--transition-fast), transform var(--transition-fast); } .portfolio-logo-card:hover { border-color: var(--ts-ink-4); } .portfolio-logo-card:hover .portfolio-logo-image { filter: brightness(0) invert(1); opacity: 1; transform: translateY(-1px); } /* Degradados laterales del marquee → igualados al ink-0 actual */ .portfolio-marquee::before { background: linear-gradient(90deg, var(--ts-ink-0) 0%, rgba(10, 11, 13, 0) 100%); } .portfolio-marquee::after { background: linear-gradient(270deg, var(--ts-ink-0) 0%, rgba(10, 11, 13, 0) 100%); } /* ============================================================ EDITORIAL UPGRADES Atmosphere, scale, motion. Pasa de "dark theme bien ejecutado" a "marca personal premium". No cambia la identidad: la afina. ============================================================ */ /* ─── A) GRANO GLOBAL ─── */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9990; opacity: 0.045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; } @media (prefers-reduced-motion: reduce) { body::before { display: none; } } /* ─── B) SCROLL PROGRESS BAR ─── */ .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 10000; background: var(--ts-accent); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; will-change: transform; } /* ─── C) CUSTOM CURSOR ─── */ .ts-cursor { position: fixed; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(198,255,61,.55); background: transparent; pointer-events: none; z-index: 10001; transition: width .18s ease, height .18s ease, border-color .18s ease, background .18s ease, opacity .2s ease; display: flex; align-items: center; justify-content: center; opacity: 0; } .has-custom-cursor .ts-cursor { opacity: 1; } .has-custom-cursor { cursor: none; } .has-custom-cursor a, .has-custom-cursor button, .has-custom-cursor [role="button"], .has-custom-cursor input, .has-custom-cursor select, .has-custom-cursor textarea, .has-custom-cursor label { cursor: none; } .ts-cursor-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ts-accent); transition: transform .18s ease, opacity .18s ease; } .ts-cursor.is-hover { width: 52px; height: 52px; border-color: var(--ts-accent); background: rgba(198,255,61,.06); } .ts-cursor.is-hover .ts-cursor-dot { transform: scale(0); opacity: 0; } .ts-cursor.is-hidden { opacity: 0; } @media (pointer: coarse) { .ts-cursor { display: none; } } /* ─── D) HEADLINE EDITORIAL ─── */ .hero-headline em, .hero-headline i, .line-2 em, .line-2 i { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ts-accent); letter-spacing: -0.03em; } /* ─── F) LOGOS BAR — typographic marquee ─── */ .logos-bar { border-block: 1px solid var(--ts-ink-3); padding: 28px 0; } .logos-track { gap: 0; } .logo-item { position: relative; padding: 0 36px; gap: 0; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-ink-6); } .logo-item + .logo-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; background: var(--ts-ink-3); transform: translateY(-50%); } .logo-item:hover { color: var(--ts-accent); } /* ─── G) MÉTRICAS — momento editorial ─── */ .results-metrics { background: transparent; border: 0; gap: 0; margin-bottom: 56px; border-radius: 0; overflow: visible; grid-template-columns: repeat(4, 1fr); } .metric-block { background: transparent; padding: 40px 24px; border: 0; border-top: 1px solid var(--ts-ink-3); border-right: 1px solid var(--ts-ink-3); text-align: left; position: relative; } .metric-block:first-child { border-left: 1px solid var(--ts-ink-3); } .metric-block:hover { background: transparent; } .metric-block::after { display: none; } .metric-number, .metric-block .counter { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(54px, 6.8vw, 96px); line-height: 0.95; letter-spacing: -0.04em; color: var(--ts-ink-10); background: none; -webkit-background-clip: initial; -webkit-text-fill-color: currentColor; margin-bottom: 16px; } .metric-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-6); font-weight: 500; margin: 0; max-width: 180px; line-height: 1.4; } .metric-feature-card { background: var(--ts-accent); color: var(--ts-accent-ink); border: 0; padding: 40px 32px; border-radius: var(--radius-md); } .metric-feature-eyebrow { color: var(--ts-accent-ink); opacity: .65; } .metric-feature-card h3 { color: var(--ts-accent-ink); font-size: 24px; line-height: 1.18; } .metric-feature-card p { color: var(--ts-accent-ink); opacity: .82; font-size: 14.5px; line-height: 1.6; } @media (max-width: 1024px) { .results-metrics { grid-template-columns: repeat(2, 1fr); } .metric-block { border-left: 1px solid var(--ts-ink-3); } .metric-block:nth-child(odd) { border-right: 1px solid var(--ts-ink-3); } } @media (max-width: 600px) { .results-metrics { grid-template-columns: 1fr; } .metric-number, .metric-block .counter { font-size: clamp(48px, 13vw, 72px); } } /* ─── H) MARCADORES DE SECCIÓN editorial — universal via .section-label ─── */ body { counter-reset: ts-section; } .section-label { counter-increment: ts-section; } /* Sustituye el tick lima por la numeración inline en el mismo color */ .section-label::before { content: "/ " counter(ts-section, decimal-leading-zero); width: auto; height: auto; background: transparent; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.22em; color: var(--ts-accent); border-radius: 0; } /* Final-CTA: marker discreto (closure, no chapter) */ .final-cta-card .section-label::before { color: var(--ts-ink-6); } /* ─── I) BTN PRIMARY — arrow slide (sólo CTAs con SVG, no submits) ─── */ .btn-primary:has(svg) { position: relative; overflow: hidden; } .btn-primary:has(svg) svg { transition: transform .35s cubic-bezier(.65,0,.35,1), opacity .35s ease; position: relative; z-index: 1; } .btn-primary:has(svg):hover svg { transform: translateX(160%); opacity: 0; } .btn-primary:has(svg)::after { content: "→"; position: absolute; right: 22px; top: 50%; transform: translate(-180%, -50%); transition: transform .35s cubic-bezier(.65,0,.35,1); font-family: var(--font-mono); font-weight: 500; font-size: 16px; color: currentColor; z-index: 1; line-height: 1; } .btn-primary:has(svg):hover::after { transform: translate(0, -50%); } /* ─── J) FOTO ABOUT — frame editorial ─── */ .about-image-wrap { position: relative; } .about-image-wrap::before { content: ""; position: absolute; inset: -14px -14px auto auto; width: 64px; height: 64px; border-top: 1px solid var(--ts-accent); border-right: 1px solid var(--ts-accent); pointer-events: none; z-index: 2; } .about-image-wrap::after { content: ""; position: absolute; inset: auto auto -14px -14px; width: 64px; height: 64px; border-bottom: 1px solid var(--ts-accent); border-left: 1px solid var(--ts-accent); pointer-events: none; z-index: 2; } .about-photo { filter: grayscale(0.85) contrast(1.05) brightness(.92); transition: filter .4s ease; } .about-photo:hover { filter: grayscale(0) contrast(1) brightness(1); } @media (max-width: 1024px) { .about-image-wrap::before, .about-image-wrap::after { width: 44px; height: 44px; } } /* ─── K) PROCESS — números italic editoriales ─── */ .process-step { position: relative; padding-top: 28px; } .process-number-wrap { margin: 0 0 14px; } .process-number { font-family: var(--font-display) !important; font-style: italic; font-weight: 400; font-size: clamp(38px, 3.4vw, 52px) !important; line-height: 0.9; letter-spacing: -0.04em !important; color: var(--ts-accent) !important; text-transform: none !important; -webkit-text-fill-color: currentColor; background: none; } .process-step h3 { margin-top: 8px; font-size: 17px; } /* ─── L) SCROLL INDICATOR — vertical editorial ─── */ .scroll-indicator { bottom: 32px; left: 50%; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 12px; } .scroll-indicator .scroll-mouse { display: none; } .scroll-indicator span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ts-ink-5); } .scroll-indicator::after { content: ""; width: 1px; height: 48px; background: linear-gradient(180deg, transparent, var(--ts-accent)); animation: scrollLine 2.2s ease-in-out infinite; } @keyframes scrollLine { 0%, 100% { opacity: .3; transform: scaleY(.4); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } } /* ─── M) FOOTER SIGN-OFF tipográfico ─── */ .footer-signoff { padding: 80px 0 64px; border-bottom: 1px solid var(--ts-ink-3); margin-bottom: 56px; } .footer-signoff-kicker { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-6); margin-bottom: 18px; } .footer-signoff-text { font-family: var(--font-heading); font-weight: 500; font-size: clamp(56px, 11vw, 168px); line-height: 0.92; letter-spacing: -0.045em; color: var(--ts-ink-10); margin: 0; } .footer-signoff-text em { font-family: var(--font-display); font-style: italic; color: var(--ts-accent); font-weight: 400; } @media (max-width: 768px) { .footer-signoff { padding: 56px 0 40px; margin-bottom: 40px; } } /* Variante compacta para subpáginas (page-template, blog-template) */ .footer-signoff--compact { padding: 56px 0 48px; margin-bottom: 32px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } .footer-signoff--compact .footer-signoff-text { font-size: clamp(48px, 8.5vw, 120px); } .footer-signoff-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-ink-7); transition: color .2s ease, gap .2s ease; position: relative; padding-bottom: 6px; } .footer-signoff-cta::after { content: ""; position: absolute; left: 0; right: 30px; bottom: 0; height: 1px; background: var(--ts-ink-4); transition: background .2s ease; } .footer-signoff-cta:hover { color: var(--ts-accent); gap: 14px; } .footer-signoff-cta:hover::after { background: var(--ts-accent); } @media (max-width: 768px) { .footer-signoff--compact { padding: 40px 0 32px; } .footer-signoff--compact .footer-signoff-text { font-size: clamp(42px, 13vw, 80px); } } /* ─── N) SERVICE CARDS — sistema numérico editorial (sin emoji) ─── */ /* Cada card se numera 01, 02, 03... en Instrument Serif italic lima Aplica a la grid del home y a la grid de servicios relacionados en subpáginas */ #services .services-grid, .service-related-grid { counter-reset: ts-service; } #services .service-card, .service-related-grid .service-card { counter-increment: ts-service; } #services .service-card .service-icon, .service-related-grid .service-card .service-icon { width: auto; height: auto; background: transparent; border: 0; border-radius: 0; margin: 0 0 18px; font-size: 0; color: transparent; display: block; transform: none !important; box-shadow: none; } #services .service-card .service-icon::before, .service-related-grid .service-card .service-icon::before { content: counter(ts-service, decimal-leading-zero); display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(40px, 3.6vw, 56px); line-height: 0.9; letter-spacing: -0.04em; color: var(--ts-accent); } /* about-highlights mantiene su emoji (es un mini-checklist contextual); discreto */ .hi-icon { font-size: 16px; opacity: .85; } /* Social links del footer: contienen emoji por contenido. Discretos. */ .social-link { font-size: 14px; width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } /* ============================================================ ABOUT — Credentials wall (sustituye la foto duplicada del hero) ============================================================ */ .about-credentials { display: flex; flex-direction: column; gap: 36px; padding: 36px 32px; background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-lg); position: relative; align-self: start; } /* corner brackets editoriales en el wall */ .about-credentials::before { content: ""; position: absolute; top: -1px; right: -1px; width: 56px; height: 56px; border-top: 1px solid var(--ts-accent); border-right: 1px solid var(--ts-accent); border-top-right-radius: var(--radius-lg); pointer-events: none; } .about-credentials::after { content: ""; position: absolute; bottom: -1px; left: -1px; width: 56px; height: 56px; border-bottom: 1px solid var(--ts-accent); border-left: 1px solid var(--ts-accent); border-bottom-left-radius: var(--radius-lg); pointer-events: none; } .credential-eyebrow { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-6); margin-bottom: 14px; } /* Partner logo block */ .credential-partner-logo { display: block; max-width: 200px; width: 100%; height: auto; filter: brightness(0) invert(1); opacity: 0.92; } /* Pull-quote editorial */ .about-pullquote { margin: 0; padding: 24px 0; border-top: 1px solid var(--ts-ink-3); border-bottom: 1px solid var(--ts-ink-3); } .about-pullquote p { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.25; letter-spacing: -0.02em; color: var(--ts-ink-10); margin: 0 0 14px; } .about-pullquote p em { font-style: italic; color: var(--ts-accent); } .about-pullquote cite { font-family: var(--font-mono); font-size: 10.5px; font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-ink-6); } /* "En eCommerce desde 2014" */ .credential-since-year { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(56px, 5.2vw, 80px); line-height: 0.95; letter-spacing: -0.04em; color: var(--ts-accent); margin-bottom: 8px; } .credential-since-label { display: block; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--ts-ink-7); } /* Responsive */ @media (max-width: 1024px) { .about-credentials { padding: 28px 24px; gap: 28px; } .about-credentials::before, .about-credentials::after { width: 40px; height: 40px; } } @media (max-width: 600px) { .about-credentials { padding: 24px 22px; gap: 24px; } .credential-partner-logo { max-width: 170px; } .about-pullquote { padding: 20px 0; } .about-pullquote p { font-size: 20px; } .credential-since-year { font-size: 56px; } } /* ============================================================ HERO EDITORIAL — Level B - Sin canvas, sin floats, sin hero-card chrome, sin partner-proof - Línea 1 sans, línea 2 entera Instrument Serif italic lima - Foto editorial limpia con caption mono caps - Trust line en una sola línea con puntos lima - Link "ver disponibilidad" en lugar de outline button ============================================================ */ /* Reset oculto al chrome legacy del hero que ya no renderizamos */ #hero-canvas, #hero #blob-canvas, .blob-css-fallback, .blob-orbit, .hero-stat-card, .hero-card, .hero-visual .hero-float-1, .hero-visual .hero-float-2, .hero-visual .hero-float-3, .partner-proof, .hero-proof, .hero-note, .hero-seo-line, .hero-action-note { display: none !important; } /* Layout principal */ #hero { padding: 140px 0 96px; background: var(--gradient-hero); position: relative; overflow: hidden; } /* Línea hairline atmosférica detrás del retrato */ #hero::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--ts-ink-3) 30%, var(--ts-ink-3) 70%, transparent); opacity: .6; pointer-events: none; z-index: 0; } .hero-content--editorial { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 80px; align-items: center; position: relative; z-index: 1; } .hero-left { max-width: 640px; } /* Badge: mono caps, sobrio */ #hero .hero-badge { display: inline-flex; align-items: center; gap: 12px; padding: 7px 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-6); background: transparent; border: 1px solid var(--ts-ink-3); border-radius: 999px; margin-bottom: 32px; } #hero .hero-badge .dot { width: 6px; height: 6px; background: var(--ts-accent); border-radius: 50%; box-shadow: 0 0 10px rgba(198,255,61,.7); animation: heroDotPulse 2.2s ease-in-out infinite; } @keyframes heroDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.75); } } /* Headline en dos escalas */ .hero-headline { font-family: var(--font-heading); font-weight: 500; font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.03em; color: var(--ts-ink-10); margin: 0 0 28px; } .hero-headline .line-1 { display: block; } .hero-headline .line-2 { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.08; letter-spacing: -0.025em; color: var(--ts-accent); margin-top: 14px; } /* Subheadline más respiración */ #hero .hero-sub { font-family: var(--font-body); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--ts-ink-7); max-width: 560px; margin: 0 0 40px; } /* Acciones: 1 botón + 1 link */ #hero .hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 56px; } .hero-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; color: var(--ts-ink-8); background: none; padding: 0; position: relative; transition: color .2s ease, gap .2s ease; } .hero-link span:first-child { position: relative; } .hero-link span:first-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--ts-ink-4); transition: background .2s ease, transform .35s cubic-bezier(.65,0,.35,1); transform-origin: right; } .hero-link:hover { color: var(--ts-accent); gap: 14px; } .hero-link:hover span:first-child::after { background: var(--ts-accent); transform: scaleX(1); } .hero-link-arrow { font-family: var(--font-mono); font-size: 15px; transition: transform .25s ease; } .hero-link:hover .hero-link-arrow { transform: translateX(4px); } /* Trust row: una sola línea, separadores lima */ .hero-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ts-ink-6); } .hero-trust li { position: relative; display: inline-flex; align-items: center; } .hero-trust li + li::before { content: ""; position: absolute; left: -16px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--ts-accent); transform: translateY(-50%); box-shadow: 0 0 6px rgba(198,255,61,.55); } /* Retrato editorial */ .hero-portrait { position: relative; margin: 0; display: block; justify-self: end; max-width: 460px; width: 100%; } .hero-portrait-img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; filter: grayscale(0.95) contrast(1.05) brightness(.94); transition: filter .5s ease; } .hero-portrait:hover .hero-portrait-img { filter: grayscale(0) contrast(1) brightness(1); } /* Marca lima editorial — línea fina vertical al borde derecho */ .hero-portrait::before { content: ""; position: absolute; top: 8%; bottom: 8%; right: -10px; width: 1px; background: linear-gradient(180deg, transparent, var(--ts-accent) 30%, var(--ts-accent) 70%, transparent); z-index: 1; } /* Marca de ángulo discreta arriba a la izquierda */ .hero-portrait::after { content: ""; position: absolute; top: -12px; left: -12px; width: 32px; height: 32px; border-top: 1px solid var(--ts-accent); border-left: 1px solid var(--ts-accent); z-index: 2; } /* Caption */ .hero-portrait-caption { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-ink-6); line-height: 1.5; } .hero-portrait-caption .portrait-name { color: var(--ts-ink-10); font-weight: 500; letter-spacing: 0.14em; font-size: 11px; } .hero-portrait-caption .portrait-status { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; color: var(--ts-ink-7); } .hero-portrait-caption .status-dot { width: 6px; height: 6px; background: var(--ts-accent); border-radius: 50%; box-shadow: 0 0 8px rgba(198,255,61,.6); animation: heroDotPulse 2.2s ease-in-out infinite; } /* Responsive */ @media (max-width: 1024px) { #hero { padding: 120px 0 80px; } #hero::after { display: none; } /* Anular el text-align: center que hereda de main.css para .hero-content */ .hero-content--editorial, .hero-content--editorial .hero-sub, .hero-content--editorial .hero-actions, .hero-content--editorial .hero-trust { text-align: left; justify-content: flex-start; } .hero-content--editorial .hero-sub { margin-left: 0; margin-right: 0; max-width: 100%; } .hero-content--editorial .hero-actions { margin-left: 0; } .hero-content--editorial { grid-template-columns: 1fr; gap: 56px; } .hero-left { max-width: 100%; } .hero-portrait { justify-self: start; margin-left: 0; margin-right: auto; max-width: 400px; width: 100%; } } @media (max-width: 600px) { #hero { padding: 96px 0 64px; } .hero-content--editorial { gap: 44px; } #hero .hero-badge { font-size: 10px; letter-spacing: 0.18em; padding: 6px 12px; margin-bottom: 24px; } .hero-headline { font-size: clamp(34px, 9vw, 48px); margin-bottom: 22px; } .hero-headline .line-2 { font-size: clamp(24px, 7vw, 36px); margin-top: 10px; } #hero .hero-sub { font-size: 15px; line-height: 1.6; margin-bottom: 30px; } /* CTAs apiladas: botón full-width + link debajo */ #hero .hero-actions { flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 36px; } #hero .hero-actions .btn { width: 100%; justify-content: center; } .hero-link { justify-content: flex-start; padding: 4px 0; } /* Trust row en grid 2×2 sin separadores (evita el wrap roto de los dots) */ .hero-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .hero-trust li { display: block; } .hero-trust li + li::before { display: none; } .hero-trust li { position: relative; padding-left: 14px; } .hero-trust li::after { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--ts-accent); transform: translateY(-50%); box-shadow: 0 0 6px rgba(198,255,61,.55); } /* Portrait: 100% width hasta 340px, bracket más pequeño */ .hero-portrait { max-width: 340px; margin-left: 0; } .hero-portrait::after { width: 22px; height: 22px; top: -8px; left: -8px; } .hero-portrait::before { right: -6px; top: 6%; bottom: 6%; } .hero-portrait-caption { margin-top: 18px; font-size: 10px; letter-spacing: 0.16em; } .hero-portrait-caption .portrait-name { font-size: 10.5px; } } @media (max-width: 380px) { .hero-trust { grid-template-columns: 1fr; } .hero-portrait { max-width: 100%; } } /* ============================================================ SUBPAGES — Service-page hero editorial (page-template.php) ============================================================ */ .service-page-hero { padding: 140px 0 90px; position: relative; overflow: hidden; } .service-page-hero::after { content: ""; position: absolute; left: 50%; top: 12%; bottom: 12%; width: 1px; background: linear-gradient(180deg, transparent, var(--ts-ink-3) 30%, var(--ts-ink-3) 70%, transparent); opacity: .5; pointer-events: none; z-index: 0; } .service-page-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 80px; align-items: start; } .service-page-hero-main { display: flex; flex-direction: column; gap: 0; } .service-page-badge { align-self: flex-start; margin-bottom: 28px; } .service-page-title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(44px, 6vw, 88px); line-height: 0.98; letter-spacing: -0.035em; margin: 0 0 22px; color: var(--ts-ink-10); } .service-page-title em, .service-page-title i { color: var(--ts-accent); } .service-page-subtitle { font-family: var(--font-body); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--ts-ink-7); max-width: 560px; margin: 0 0 36px; } .service-page-hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: 0 0 44px; } .service-page-trust { margin: 0; padding: 0; } @media (max-width: 1024px) { .service-page-hero { padding: 120px 0 72px; } .service-page-hero::after { display: none; } .service-page-hero-grid { grid-template-columns: 1fr; gap: 48px; } } @media (max-width: 600px) { .service-page-hero { padding: 96px 0 56px; } .service-page-title { font-size: clamp(36px, 10vw, 56px); } .service-page-hero-actions { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 32px; } .service-page-hero-actions .btn { width: 100%; justify-content: center; } .service-page-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .service-page-trust li { display: block; padding-left: 14px; position: relative; } .service-page-trust li + li::before { display: none; } .service-page-trust li::after { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--ts-accent); transform: translateY(-50%); box-shadow: 0 0 6px rgba(198,255,61,.55); } } /* ============================================================ EMOJI CLEANUP — sustituye los iconos emoji por sistema editorial ============================================================ */ /* Contact details: sin icono. Hairline lima a la izquierda */ .contact-details-list { margin-top: 40px; display: flex; flex-direction: column; gap: 0; } .contact-detail { padding: 18px 0 18px 20px; border-left: 1px solid var(--ts-ink-3); border-bottom: 0; transition: border-color .2s ease, padding-left .2s ease; display: block; background: transparent; } .contact-detail:hover { border-left-color: var(--ts-accent); padding-left: 24px; } .contact-detail-icon { display: none !important; } .contact-detail-text { display: flex; flex-direction: column; gap: 4px; } .cd-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-6); margin-bottom: 2px; } .contact-detail-text a { font-family: var(--font-body); font-size: 15px; color: var(--color-text); text-decoration: none; transition: color .15s ease; } .contact-detail-text a:hover { color: var(--ts-accent); } /* LinkedIn banner con SVG limpio */ .linkedin-banner { display: flex; align-items: center; gap: 16px; padding: 18px 22px; margin-top: 32px; background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-md); transition: border-color .2s ease; text-decoration: none; } .linkedin-banner:hover { border-color: var(--ts-accent); } .linkedin-logo-svg { flex-shrink: 0; color: var(--ts-ink-7); transition: color .2s ease; } .linkedin-banner:hover .linkedin-logo-svg { color: var(--ts-accent); } .linkedin-text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .linkedin-text strong { font-size: 14px; color: var(--ts-ink-10); } .linkedin-text span { font-size: 11px; } .linkedin-arrow { font-family: var(--font-mono); color: var(--ts-ink-6); transition: color .2s ease, transform .2s ease; } .linkedin-banner:hover .linkedin-arrow { color: var(--ts-accent); transform: translateX(3px); } /* Form success: SVG check editorial */ .form-success .success-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--ts-accent); background: rgba(198,255,61,.05); color: var(--ts-accent); margin-bottom: 20px; } .form-success h3 em { font-family: var(--font-display); font-style: italic; color: var(--ts-accent); } /* Footer social-links como texto mono caps */ .social-links { display: flex; gap: 24px; margin-top: 20px; } .social-link { width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 4px 0 !important; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-ink-6); text-decoration: none; position: relative; } .social-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ts-ink-4); transition: background .2s ease; } .social-link:hover { color: var(--ts-accent); } .social-link:hover::after { background: var(--ts-accent); } /* About highlights: lima dot en vez del emoji */ .hi-icon { font-size: 0 !important; color: transparent !important; width: 7px !important; height: 7px !important; background: var(--ts-accent); border-radius: 50%; display: inline-block; flex-shrink: 0; opacity: 1 !important; box-shadow: 0 0 8px rgba(198,255,61,.45); } /* ============================================================ FIT — markers editoriales (círculo lima + hairline gris) ============================================================ */ .fit-list { display: grid; gap: 16px; padding: 0; } .fit-list li { position: relative; padding-left: 32px; color: var(--ts-ink-7); line-height: 1.7; list-style: none; } .fit-list-positive li::before { content: ""; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border: 1px solid var(--ts-accent); border-radius: 50%; background-color: rgba(198,255,61,.06); background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23C6FF3D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; } .fit-list-positive li::after { display: none; } .fit-list-muted li::before { content: ""; position: absolute; left: 1px; top: 15px; width: 18px; height: 1px; background: var(--ts-ink-5); border: 0; border-radius: 0; } .fit-list-muted li::after { display: none; } .fit-list-muted li { color: var(--ts-ink-6); } /* ============================================================ FAQ — numerada + icono + → × ============================================================ */ .faq-list { counter-reset: ts-faq; padding: 0; } .faq-item { counter-increment: ts-faq; position: relative; } .faq-question { position: relative; padding-left: 64px !important; width: 100%; text-align: left; } .faq-question::before { content: counter(ts-faq, decimal-leading-zero); position: absolute; left: 0; top: 22px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; color: var(--ts-ink-6); } .faq-icon { position: relative; display: inline-block; width: 22px; height: 22px; font-size: 0 !important; color: transparent !important; flex-shrink: 0; } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--ts-accent); transition: transform .3s cubic-bezier(.65,0,.35,1); } .faq-icon::before { width: 14px; height: 1px; transform: translate(-50%, -50%); } .faq-icon::after { width: 1px; height: 14px; transform: translate(-50%, -50%); } .faq-item.open .faq-icon::before { transform: translate(-50%, -50%) rotate(45deg); } .faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(45deg); } /* ============================================================ CONTACT FORM — editorial (border-bottom only) ============================================================ */ .contact-form-wrap { padding: 36px 36px 32px; } .form-group { margin-bottom: 22px; position: relative; } .form-group label { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-6); margin-bottom: 10px; } .form-group input, .form-group select, .form-group textarea { border: 0; border-bottom: 1px solid var(--ts-ink-3); border-radius: 0; background: transparent; padding: 10px 0 12px; font-family: var(--font-body); font-size: 15px; color: var(--ts-ink-10); transition: border-color .2s ease; width: 100%; box-shadow: none; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--ts-ink-5); font-family: var(--font-body); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-bottom-color: var(--ts-accent); outline: 0; box-shadow: none; background: transparent; } .form-group select { appearance: none; -webkit-appearance: none; color-scheme: dark; background-image: linear-gradient(45deg, transparent 50%, var(--ts-ink-6) 50%), linear-gradient(-45deg, transparent 50%, var(--ts-ink-6) 50%); background-position: calc(100% - 14px) 18px, calc(100% - 8px) 18px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 30px; } .form-group select:focus { background-image: linear-gradient(45deg, transparent 50%, var(--ts-accent) 50%), linear-gradient(-45deg, transparent 50%, var(--ts-accent) 50%); background-position: calc(100% - 14px) 18px, calc(100% - 8px) 18px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } /* Desplegable nativo: fondo oscuro y texto claro en las opciones. Evita que el SO/navegador pinte la opción seleccionada con su color de acento (lima) y texto blanco, que quedaba ilegible. color-scheme:dark fuerza el popup oscuro. */ .form-group select option { background-color: var(--ts-ink-1); color: var(--ts-ink-10); } .form-group select option:checked, .form-group select option:hover { background-color: var(--ts-ink-3); color: var(--ts-ink-10); } .form-group textarea { min-height: 110px; resize: vertical; } .form-error { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #FF6B6B; } /* ============================================================ #LOCAL-BASE — geographic plate editorial (sustituye el mapa) ============================================================ */ .local-shell { position: relative; overflow: hidden; } .local-plate { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 28px 28px; background: var(--ts-ink-0); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-md); margin-bottom: 18px; } .local-plate::before { content: ""; position: absolute; top: -1px; left: -1px; width: 44px; height: 44px; border-top: 1px solid var(--ts-accent); border-left: 1px solid var(--ts-accent); border-top-left-radius: var(--radius-md); pointer-events: none; } .local-plate::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 44px; height: 44px; border-bottom: 1px solid var(--ts-accent); border-right: 1px solid var(--ts-accent); border-bottom-right-radius: var(--radius-md); pointer-events: none; } .local-plate-header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--ts-ink-3); } .local-plate-coords { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; color: var(--ts-ink-6); } .local-plate-mark { color: var(--ts-ink-4); } .local-plate-tag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-accent); } .local-plate-place { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(48px, 5vw, 80px); line-height: 0.95; letter-spacing: -0.04em; color: var(--ts-ink-10); margin: 8px 0 4px; } .local-plate-place em { font-style: italic; color: var(--ts-accent); margin-left: -4px; } .local-plate-meta { font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; color: var(--ts-ink-7); max-width: 320px; margin-bottom: 12px; } .local-plate-cities { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--ts-ink-3); display: flex; flex-direction: column; gap: 12px; } .local-plate-cities li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .local-plate-cities .lp-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ts-ink-5); justify-self: center; } .local-plate-cities li.is-base .lp-dot { width: 8px; height: 8px; background: var(--ts-accent); box-shadow: 0 0 10px rgba(198,255,61,.65); animation: heroDotPulse 2.6s ease-in-out infinite; } .local-plate-cities .lp-name { color: var(--ts-ink-7); } .local-plate-cities li.is-base .lp-name { color: var(--ts-ink-10); letter-spacing: 0.18em; } .local-plate-cities .lp-meta { color: var(--ts-ink-6); font-size: 10px; letter-spacing: 0.16em; } .local-plate-cities li.is-base .lp-meta { color: var(--ts-accent); } @media (max-width: 768px) { .local-plate { padding: 22px 22px 24px; } .local-plate-place { font-size: clamp(44px, 13vw, 64px); } .local-plate::before, .local-plate::after { width: 32px; height: 32px; } } /* ============================================================ :focus-visible — anillo lima editorial global ============================================================ */ *:focus { outline: 0; } *:focus-visible { outline: 2px solid var(--ts-accent); outline-offset: 4px; border-radius: 4px; } .btn:focus-visible { outline-offset: 3px; } .faq-question:focus-visible, .testimonial-dot:focus-visible { outline-offset: 2px; } .form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible { outline: 0; border-bottom-color: var(--ts-accent); box-shadow: 0 1px 0 0 var(--ts-accent); } /* ============================================================ POLISH PASS — 10 puntos ============================================================ */ /* INSIGHT CARDS — quitar el icono ✍️ (la insight-eyebrow ya da contexto) */ .insight-card .service-icon { display: none !important; } /* 1) SHOPIFY PLUS — número editorial italic (consistente con services/process) */ .plus-grid { counter-reset: ts-plus; } .plus-card { counter-increment: ts-plus; position: relative; } .plus-card::before { content: counter(ts-plus, decimal-leading-zero); display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(34px, 3vw, 44px); line-height: 0.95; letter-spacing: -0.04em; color: var(--ts-accent); margin-bottom: 12px; } .plus-card h3 { margin-top: 0; } /* Suaviza el shell que envuelve las plus-cards (era un card dentro de card) */ .plus-shell { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ts-ink-3) !important; border-radius: 0 !important; padding: 48px 0 0 !important; box-shadow: none !important; } .plus-copy { max-width: 720px; } /* 2) SERVICE-PAGE SUMMARY — editorial card con corner brackets (sustituye glass) */ .service-page-summary.glass-card, .service-page-summary { background: var(--ts-ink-0) !important; border: 1px solid var(--ts-ink-3) !important; border-radius: var(--radius-md) !important; padding: 32px 30px !important; position: relative; box-shadow: none !important; backdrop-filter: none !important; } .service-page-summary::before { content: ""; position: absolute; top: -1px; right: -1px; width: 44px; height: 44px; border-top: 1px solid var(--ts-accent); border-right: 1px solid var(--ts-accent); border-top-right-radius: var(--radius-md); pointer-events: none; } .service-page-summary::after { content: ""; position: absolute; bottom: -1px; left: -1px; width: 44px; height: 44px; border-bottom: 1px solid var(--ts-accent); border-left: 1px solid var(--ts-accent); border-bottom-left-radius: var(--radius-md); pointer-events: none; } .service-page-summary h2 { font-family: var(--font-mono) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--ts-ink-6) !important; margin: 0 0 16px !important; } .service-page-summary p { font-size: 14px; line-height: 1.65; } /* Bullets en summary: check editorial (mismo sistema que fit-list-positive) */ .service-page-bullets { list-style: none; display: grid; gap: 12px; padding: 0; margin: 18px 0 0; } .service-page-bullets li { position: relative; padding-left: 30px; color: var(--ts-ink-7); line-height: 1.6; font-size: 14px; } .service-page-bullets li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border: 1px solid var(--ts-accent); border-radius: 50%; background-color: rgba(198,255,61,.06); background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23C6FF3D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.5l2.4 2.4 4.6-4.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 18px 18px; } /* 3) SERVICE-PAGE-FIT-NOTE → blockquote editorial */ .service-page-fit-note { margin-top: 24px !important; padding: 6px 0 6px 18px !important; border: 0 !important; border-left: 2px solid var(--ts-accent) !important; background: transparent !important; border-radius: 0 !important; font-family: var(--font-display); font-style: italic; font-size: 15.5px; line-height: 1.5; color: var(--ts-ink-8); letter-spacing: -0.01em; } /* Misma idea aplicada al qualifier del final-cta de subpáginas */ .service-page-qualifier { border: 0 !important; background: transparent !important; padding: 0 !important; margin-top: 18px !important; font-family: var(--font-body); font-size: 13px; color: var(--ts-ink-6); } /* 4) PORTFOLIO LOGOS — hover con scale y brillo (sin invertir colores) */ .portfolio-logo-image { opacity: 0.55; transition: opacity .25s ease, transform .35s cubic-bezier(.65,0,.35,1), filter .25s ease; } .portfolio-logo-card:hover .portfolio-logo-image { opacity: 1; transform: translateY(-2px) scale(1.05); filter: brightness(0) invert(1); } .portfolio-logo-card { transition: border-color .25s ease, background .25s ease; } .portfolio-logo-card:hover { border-color: var(--ts-accent); background: var(--ts-ink-2); } /* 5) PROCESS NUMBERS — un punto más grandes para equilibrar con métricas/services */ .process-number { font-size: clamp(48px, 4.4vw, 72px) !important; line-height: 0.88; } .process-number-wrap { margin: 0 0 18px; } /* 6) SECTION MARKERS — ahora gestionados directamente en .section-label::before arriba */ /* (regla previa retirada al universalizar el sistema) */ /* 7) HERO PORTRAIT — sin hover en touch, sale ya con un toque de color */ @media (hover: none) { .hero-portrait-img { filter: grayscale(0.4) contrast(1.02) brightness(.98); } } /* 8) FOOTER COLUMNS — kicker italic romano I. II. III. */ .footer-grid { counter-reset: ts-footer; } .footer-col { counter-increment: ts-footer; } .footer-col h3 { position: relative; padding-left: 28px; } .footer-col h3::before { content: counter(ts-footer, upper-roman) "."; position: absolute; left: 0; top: -1px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 16px; letter-spacing: -0.02em; color: var(--ts-accent); text-transform: none; } /* 9) LINKEDIN BANNER — corner brackets editoriales para anclar al sistema */ .linkedin-banner { position: relative; } .linkedin-banner::before { content: ""; position: absolute; top: -1px; left: -1px; width: 32px; height: 32px; border-top: 1px solid var(--ts-accent); border-left: 1px solid var(--ts-accent); border-top-left-radius: var(--radius-md); pointer-events: none; opacity: 0; transition: opacity .25s ease; } .linkedin-banner::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 32px; height: 32px; border-bottom: 1px solid var(--ts-accent); border-right: 1px solid var(--ts-accent); border-bottom-right-radius: var(--radius-md); pointer-events: none; opacity: 0; transition: opacity .25s ease; } .linkedin-banner:hover::before, .linkedin-banner:hover::after { opacity: 1; } /* MOBILE — hero: respiración + scroll-indicator oculto en pequeño */ @media (max-width: 768px) { /* main.css ya hace display:none pero mi override editorial lo reactivaba */ .scroll-indicator { display: none !important; } /* Más aire al fondo del hero antes del logos-bar */ #hero { padding-bottom: 88px; } } @media (max-width: 600px) { #hero { padding-bottom: 96px; } } /* VERTICAL ALIGNMENT — coherencia entre secciones de 2 columnas */ /* About: credentials wall centrado vertical contra el texto (antes anclado al top) */ .about-credentials { align-self: center; } /* Local-shell: copy + plate centrados (no stretch) */ .local-shell { align-items: center; } /* 10) MOBILE-NAV-CLOSE — esconde el ✕ texto, vamos a renderizar SVG vía CSS-only */ .mobile-nav-close { position: relative; font-size: 0; color: transparent; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--ts-ink-3); background: transparent; transition: border-color .2s ease; } .mobile-nav-close::before, .mobile-nav-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 1px; background: var(--ts-ink-7); transform: translate(-50%, -50%) rotate(45deg); transition: background .2s ease; } .mobile-nav-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .mobile-nav-close:hover { border-color: var(--ts-accent); } .mobile-nav-close:hover::before, .mobile-nav-close:hover::after { background: var(--ts-accent); } /* ============================================================ BACKLOG GEMS — process line + partner logo hover ============================================================ */ /* Conector hairline sutil entre process-steps (alineado bajo el number) */ .process-grid { position: relative; } .process-grid::before { content: ""; display: block; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--ts-ink-3) 12%, var(--ts-ink-3) 88%, transparent); opacity: .55; z-index: 0; pointer-events: none; } @media (max-width: 1024px) { .process-grid::before { display: none; } } /* Partner logo en about-credentials: ligero glow al hover del bloque */ .credential-partner { transition: filter .25s ease; cursor: default; } .credential-partner:hover .credential-partner-logo { opacity: 1; filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(198,255,61,.35)); } .credential-partner-logo { transition: opacity .25s ease, filter .25s ease; } /* ============================================================ FINAL HARDENING — emoji cleanup defensivo + testimonials bleed ============================================================ */ /* Defensa contra emojis residuales — reglas con !important consolidadas */ .hi-icon { font-size: 0 !important; line-height: 0 !important; color: transparent !important; width: 7px !important; height: 7px !important; background: var(--ts-accent) !important; border-radius: 50% !important; display: inline-block !important; flex-shrink: 0 !important; opacity: 1 !important; box-shadow: 0 0 8px rgba(198,255,61,.45) !important; align-self: center; } /* Si por algún caché viejo el emoji aparece, lo recortamos */ .hi-icon::first-letter { font-size: 0 !important; } /* Insight cards: el icono ✍️ siempre oculto, en cualquier contexto */ .insight-card > .service-icon, .insights-grid .service-card .service-icon { display: none !important; } /* Services + related-grid: el icono se reemplaza por número editorial. Forzamos font-size:0 / color:transparent para que el emoji JSON no aparezca aunque se cuele en otra grid donde no quitamos display */ #services .service-card .service-icon, .service-related-grid .service-card .service-icon { font-size: 0 !important; color: transparent !important; } /* Mobile-nav-close ✕ definitivamente oculto */ .mobile-nav-close { font-size: 0 !important; color: transparent !important; } /* TESTIMONIALS — bleed en móvil para que el carrusel use el ancho real del viewport */ @media (max-width: 1024px) { #results .container { position: relative; } .testimonials-grid { margin-left: -24px !important; margin-right: -24px !important; padding-left: 24px !important; padding-right: 24px !important; width: calc(100% + 48px) !important; scroll-padding-inline: 24px !important; gap: 14px !important; } .testimonial-card { min-width: min(440px, 86%) !important; flex: 0 0 min(440px, 86%) !important; scroll-snap-align: start !important; padding: 24px 22px !important; } #results { overflow: hidden; } /* Hacer que la sombra/fade lateral se vea más editorial */ .testimonial-dots { margin-top: 22px; } } @media (max-width: 600px) { .testimonials-grid { margin-left: -20px !important; margin-right: -20px !important; padding-left: 20px !important; padding-right: 20px !important; width: calc(100% + 40px) !important; scroll-padding-inline: 20px !important; } .testimonial-card { min-width: 88% !important; flex: 0 0 88% !important; padding: 22px 20px !important; } } /* ============================================================ NAV DROPDOWN + MOBILE NAV GROUPS + FOOTER 5-COL ============================================================ */ .nav-dropdown { position: relative; } .nav-dropdown-toggle { background: transparent; border: 0; padding: 8px 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ts-ink-6); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color .15s ease; } .nav-dropdown-toggle:hover, .nav-dropdown-toggle[aria-expanded="true"] { color: var(--ts-ink-10); } .nav-chevron { font-size: 9px; line-height: 1; transition: transform .25s ease, color .15s ease; } .nav-dropdown-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); color: var(--ts-accent); } .nav-dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; padding: 14px; background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-md); display: none; flex-direction: column; gap: 2px; box-shadow: 0 18px 40px rgba(0,0,0,.5); z-index: 100; } .nav-dropdown-menu::before { content: ""; position: absolute; top: -1px; left: -1px; width: 22px; height: 22px; border-top: 1px solid var(--ts-accent); border-left: 1px solid var(--ts-accent); border-top-left-radius: var(--radius-md); pointer-events: none; } .nav-dropdown-menu::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 22px; height: 22px; border-bottom: 1px solid var(--ts-accent); border-right: 1px solid var(--ts-accent); border-bottom-right-radius: var(--radius-md); pointer-events: none; } .nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu { display: flex; } .nav-dropdown-menu a { padding: 10px 14px; font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; text-transform: none; color: var(--ts-ink-7); border-radius: 6px; text-decoration: none; transition: background .15s ease, color .15s ease; position: relative; } .nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible { background: var(--ts-ink-2); color: var(--ts-accent); outline: none; } /* Mega-menu: dropdown ancho con 4 columnas (Recursos) */ .nav-dropdown-menu--wide { min-width: 720px; max-width: min(880px, calc(100vw - 40px)); left: 50%; right: auto; transform: translateX(-50%); padding: 22px 22px 18px; display: none; grid-template-columns: repeat(4, 1fr); gap: 8px 28px; } .nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu--wide { display: grid; } .nav-dropdown-col { display: flex; flex-direction: column; gap: 2px; } .nav-dropdown-heading { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-accent); padding: 6px 14px 10px; border-bottom: 1px solid var(--ts-ink-3); margin-bottom: 6px; } .nav-dropdown-menu--wide a { padding: 8px 14px; font-size: 13.5px; white-space: nowrap; } @media (max-width: 1024px) { .nav-dropdown, .nav-dropdown-menu, .nav-dropdown-menu--wide { display: none !important; } } /* Mobile nav: grupos editoriales */ .mobile-link-group { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-accent); padding: 22px 16px 6px; } .mobile-link--sub { padding-left: 32px !important; font-size: 17px !important; position: relative; } .mobile-link--sub::before { content: ""; position: absolute; left: 16px; top: 50%; width: 8px; height: 1px; background: var(--ts-ink-4); transform: translateY(-50%); } /* Footer 5-col grid */ .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important; gap: 40px !important; } @media (max-width: 1100px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr !important; } } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr !important; } .footer-brand { grid-column: auto; } } /* ============================================================ CASOS — page-specific editorial layout ============================================================ */ .cases-hero { padding: 140px 0 60px; background: var(--gradient-hero); } .cases-hero .container { max-width: 920px; } .cases-hero .section-label { margin-bottom: 24px; } .cases-title { font-family: var(--font-heading); font-weight: 500; font-size: clamp(40px, 5.6vw, 76px); line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 24px; color: var(--ts-ink-10); max-width: 880px; } .cases-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ts-accent); letter-spacing: -0.035em; } .cases-subtitle { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; color: var(--ts-ink-7); max-width: 680px; } .cases-subtitle strong { color: var(--ts-ink-10); font-weight: 600; } .cases-list { padding: 40px 0 96px; } .cases-list .container { max-width: 980px; } .case-item { display: grid; grid-template-columns: 140px 1fr; gap: 48px; padding: 56px 0; border-top: 1px solid var(--ts-ink-3); } .case-item:last-child { border-bottom: 1px solid var(--ts-ink-3); } .case-meta { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 120px; align-self: start; } .case-num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 72px; line-height: 0.9; letter-spacing: -0.04em; color: var(--ts-accent); } .case-meta-tags { display: flex; flex-direction: column; gap: 8px; } .case-sector, .case-duration { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ts-ink-6); } .case-duration { color: var(--ts-ink-7); } .case-duration::before { content: "· "; opacity: .5; } .case-body { display: flex; flex-direction: column; gap: 24px; } .case-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-accent); } .case-headline { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; letter-spacing: -0.02em; color: var(--ts-ink-10); margin: 0; } .case-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; padding-top: 16px; border-top: 1px solid var(--ts-ink-3); } .case-block-label { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-5); margin-bottom: 12px; } .case-block p, .case-list li { font-size: 14px; line-height: 1.6; color: var(--ts-ink-7); margin: 0; } .case-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .case-list li { position: relative; padding-left: 18px; } .case-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--ts-ink-5); } .case-list--positive li::before { width: 6px; height: 6px; top: 8px; border-radius: 50%; background: var(--ts-accent); box-shadow: 0 0 6px rgba(198,255,61,.5); } .case-list--positive li { color: var(--ts-ink-8); } .case-metric { align-self: flex-start; margin-top: 4px; padding: 8px 14px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ts-accent); border: 1px solid var(--ts-accent); border-radius: 999px; background: rgba(198,255,61,.06); } @media (max-width: 1024px) { .case-item { grid-template-columns: 100px 1fr; gap: 32px; } .case-num { font-size: 56px; } .case-grid { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 600px) { .cases-hero { padding: 110px 0 40px; } .case-item { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; } .case-meta { position: static; flex-direction: row; align-items: baseline; gap: 18px; } .case-num { font-size: 44px; } .case-meta-tags { flex-direction: row; gap: 12px; flex-wrap: wrap; } } /* ============================================================ METHOD — page-specific (metodo.php) ============================================================ */ .method-principles { padding: 64px 0; background: var(--ts-ink-1); border-top: 1px solid var(--ts-ink-3); border-bottom: 1px solid var(--ts-ink-3); } .principles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 40px; } .principle-item { position: relative; padding: 28px 26px; border-left: 1px solid var(--ts-ink-3); } .principle-kicker { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 32px; line-height: 1; color: var(--ts-accent); margin-bottom: 14px; } .principle-title { font-family: var(--font-heading); font-weight: 500; font-size: 19px; letter-spacing: -0.02em; color: var(--ts-ink-10); margin: 0 0 10px; } .principle-item p { font-size: 14.5px; line-height: 1.65; color: var(--ts-ink-7); margin: 0; } .method-phases { padding: 80px 0 96px; } .phases-list { display: flex; flex-direction: column; margin-top: 40px; } .phase-item { display: grid; grid-template-columns: 160px 1fr; gap: 48px; padding: 48px 0; border-top: 1px solid var(--ts-ink-3); } .phase-item:last-child { border-bottom: 1px solid var(--ts-ink-3); } .phase-meta { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 120px; align-self: start; } .phase-num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 88px; line-height: 0.88; letter-spacing: -0.045em; color: var(--ts-accent); } .phase-duration { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-6); } .phase-title { font-family: var(--font-heading); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.02em; color: var(--ts-ink-10); margin: 0 0 14px; } .phase-text { font-size: 15.5px; line-height: 1.65; color: var(--ts-ink-7); margin: 0 0 24px; max-width: 640px; } .phase-deliverables { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; padding-top: 20px; border-top: 1px solid var(--ts-ink-3); } .phase-deliverables li { position: relative; padding-left: 18px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--ts-ink-7); } .phase-deliverables li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--ts-accent); } @media (max-width: 1024px) { .principles-grid { grid-template-columns: 1fr; gap: 20px; } .phase-item { grid-template-columns: 100px 1fr; gap: 32px; } .phase-num { font-size: 64px; } .phase-deliverables { grid-template-columns: 1fr; } } @media (max-width: 600px) { .phase-item { grid-template-columns: 1fr; gap: 18px; padding: 36px 0; } .phase-meta { position: static; flex-direction: row; align-items: baseline; gap: 16px; } .phase-num { font-size: 48px; } } /* ============================================================ AUDIT (lead magnet) — page-specific ============================================================ */ .audit-hero { padding: 140px 0 80px; background: var(--gradient-hero); } .audit-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; } .audit-title { font-family: var(--font-heading); font-weight: 500; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -0.03em; margin: 18px 0 22px; } .audit-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ts-accent); } .audit-subtitle { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--ts-ink-7); max-width: 540px; margin: 0 0 28px; } .audit-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .audit-bullets li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.5; color: var(--ts-ink-7); } .audit-bullets li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--ts-accent); } .audit-form-wrap { position: relative; padding: 32px 30px; background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-md); } .audit-form-wrap::before { content: ""; position: absolute; top: -1px; right: -1px; width: 44px; height: 44px; border-top: 1px solid var(--ts-accent); border-right: 1px solid var(--ts-accent); border-top-right-radius: var(--radius-md); pointer-events: none; } .audit-form-wrap::after { content: ""; position: absolute; bottom: -1px; left: -1px; width: 44px; height: 44px; border-bottom: 1px solid var(--ts-accent); border-left: 1px solid var(--ts-accent); border-bottom-left-radius: var(--radius-md); pointer-events: none; } .audit-form-eyebrow { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-6); margin-bottom: 8px; } .audit-form-title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); line-height: 0.95; letter-spacing: -0.03em; color: var(--ts-ink-10); margin: 0 0 24px; } .audit-form-title em { color: var(--ts-accent); margin-left: -3px; } .audit-submit { width: 100%; justify-content: center; margin-top: 6px; } .audit-checks { padding: 80px 0 64px; } .audit-checks-list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; margin-top: 40px; } .audit-check-item { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--ts-ink-3); } .audit-check-num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: -0.04em; color: var(--ts-accent); } .audit-check-body h3 { font-family: var(--font-heading); font-weight: 500; font-size: 16px; line-height: 1.3; letter-spacing: -0.015em; color: var(--ts-ink-10); margin: 0 0 6px; } .audit-check-body p { font-size: 13.5px; line-height: 1.55; color: var(--ts-ink-7); margin: 0; } @media (max-width: 1024px) { .audit-hero-grid { grid-template-columns: 1fr; gap: 40px; } .audit-checks-list { grid-template-columns: 1fr; } } @media (max-width: 600px) { .audit-hero { padding: 110px 0 56px; } .audit-form-wrap { padding: 26px 22px; } } /* Audit check item — añadimos categoría arriba */ .audit-check-cat { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ts-accent); margin-bottom: 6px; } /* Audit bonus section */ .audit-bonus { padding: 32px 0 80px; } .audit-bonus-intro { font-size: clamp(16px, 1.3vw, 18px); color: var(--ts-ink-7); max-width: 640px; margin: 0 0 32px; } .audit-bonus-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; } .audit-bonus-list li { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid var(--ts-ink-3); font-size: 14.5px; line-height: 1.55; color: var(--ts-ink-7); } .audit-bonus-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--ts-accent); margin-top: 8px; box-shadow: 0 0 8px rgba(198,255,61,.5); } @media (max-width: 768px) { .audit-bonus-list { grid-template-columns: 1fr; } } /* Audit form: success state */ .audit-form-success { display: none; padding: 32px 4px; } .audit-form-success.is-visible { display: block; } .audit-form-wrap.is-success .audit-form { display: none; } .audit-form-success .success-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--ts-accent); background: rgba(198,255,61,.06); color: var(--ts-accent); margin-bottom: 20px; } .audit-form-success h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(28px, 3vw, 36px); line-height: 1; letter-spacing: -0.03em; color: var(--ts-ink-10); margin: 0 0 14px; } .audit-form-success h3 em { color: var(--ts-accent); margin-left: -2px; } .audit-form-success p { font-size: 14.5px; line-height: 1.65; color: var(--ts-ink-7); margin: 0 0 22px; max-width: 380px; } /* Audit submit loading state */ .audit-submit.is-loading .btn-text { opacity: .5; } .audit-submit.is-loading .btn-icon { animation: auditSpin .8s linear infinite; } @keyframes auditSpin { to { transform: rotate(360deg); } } /* Error visible */ .form-group.has-error input { border-bottom-color: #FF6B6B; } .form-group .form-error { display: none; } .form-group.has-error .form-error { display: block; } /* ============================================================ GLOSSARY — page-specific ============================================================ */ .glossary-list { padding: 40px 0 96px; } .glossary-list .container { max-width: 920px; } .glossary-item { display: grid; grid-template-columns: 140px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--ts-ink-3); } .glossary-item:last-child { border-bottom: 1px solid var(--ts-ink-3); } .glossary-meta { padding-top: 4px; } .glossary-category { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-6); } .glossary-term { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -0.025em; color: var(--ts-ink-10); margin: 0 0 10px; } .glossary-body p { font-size: 15px; line-height: 1.65; color: var(--ts-ink-7); margin: 0; max-width: 720px; } @media (max-width: 768px) { .glossary-item { grid-template-columns: 1fr; gap: 8px; } .glossary-meta { padding-top: 0; } } /* ============================================================ COMPARE — page-specific (shopify-vs-X.php) ============================================================ */ .compare-list { padding: 40px 0 64px; } .compare-list .container { max-width: 1080px; } .compare-row { padding: 32px 0; border-top: 1px solid var(--ts-ink-3); } .compare-row:last-child { border-bottom: 1px solid var(--ts-ink-3); } .compare-topic { font-family: var(--font-heading); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em; color: var(--ts-ink-10); margin: 0 0 22px; } .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .compare-col { position: relative; padding: 22px 22px; background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-md); } .compare-col-label { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-6); margin-bottom: 10px; } .compare-col p { font-size: 14.5px; line-height: 1.65; color: var(--ts-ink-7); margin: 0; } .compare-col.is-winner { border-color: var(--ts-accent); background: rgba(198,255,61,.04); } .compare-col.is-winner .compare-col-label { color: var(--ts-accent); } .compare-col.is-winner::after { content: "Mejor opción"; position: absolute; top: -10px; right: 14px; padding: 3px 10px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ts-accent-ink); background: var(--ts-accent); border-radius: 999px; } .compare-verdict { padding: 64px 0 56px; background: var(--ts-ink-1); border-top: 1px solid var(--ts-ink-3); border-bottom: 1px solid var(--ts-ink-3); } .verdict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; } .verdict-card { padding: 28px; background: var(--ts-ink-0); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-md); } .verdict-label { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-accent); margin-bottom: 16px; } .verdict-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .verdict-card li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.6; color: var(--ts-ink-7); } .verdict-card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 1px; background: var(--ts-accent); } @media (max-width: 768px) { .compare-grid { grid-template-columns: 1fr; } .verdict-grid { grid-template-columns: 1fr; } } /* ============================================================ SOBRE MÍ — Editorial storytelling ============================================================ */ /* ─── HERO ─── */ .about-hero { padding: 160px 0 80px; background: var(--gradient-hero); position: relative; overflow: hidden; } .about-hero::after { content: ""; position: absolute; left: 50%; top: 12%; bottom: 12%; width: 1px; background: linear-gradient(180deg, transparent, var(--ts-ink-3) 30%, var(--ts-ink-3) 70%, transparent); opacity: .5; pointer-events: none; z-index: 0; } .about-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 88px; align-items: center; } .about-hero-text { max-width: 720px; } .about-hero-text .section-label { margin-bottom: 28px; } .about-hero-title { font-family: var(--font-heading); font-weight: 500; font-size: clamp(40px, 5.6vw, 84px); line-height: 1.01; letter-spacing: -0.03em; margin: 0 0 28px; color: var(--ts-ink-10); } .about-hero-title em, .about-hero-em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ts-accent); letter-spacing: -0.035em; } .about-hero-counter em { display: inline-block; vertical-align: -2px; } .about-hero-sub { font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6; color: var(--ts-ink-7); max-width: 560px; margin: 0 0 28px; } .about-hero-meta { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-ink-7); } .about-hero-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ts-accent); margin-right: 12px; box-shadow: 0 0 10px rgba(198,255,61,.7); animation: heroDotPulse 2.2s ease-in-out infinite; vertical-align: middle; } /* Portrait con marco editorial */ .about-hero-portrait { position: relative; margin: 0; justify-self: end; max-width: 440px; width: 100%; } .about-hero-portrait::before { content: ""; position: absolute; top: -16px; left: -16px; width: 56px; height: 56px; border-top: 1px solid var(--ts-accent); border-left: 1px solid var(--ts-accent); z-index: 2; pointer-events: none; } .about-hero-portrait::after { content: ""; position: absolute; bottom: -16px; right: -16px; width: 56px; height: 56px; border-bottom: 1px solid var(--ts-accent); border-right: 1px solid var(--ts-accent); z-index: 2; pointer-events: none; } .about-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center top; border-radius: 2px; /* La foto ya viene tratada editorial B&W — sólo micro-tweak sutil */ filter: contrast(1.02); transition: filter .4s ease; } .about-hero-portrait:hover .about-hero-img { filter: contrast(1.06) brightness(1.02); } .about-hero-caption { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-ink-6); line-height: 1.5; } .about-hero-caption .portrait-name { color: var(--ts-ink-10); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; } /* ─── STATS BAR ─── */ .about-stats { padding: 56px 0; border-top: 1px solid var(--ts-ink-3); border-bottom: 1px solid var(--ts-ink-3); background: var(--ts-ink-1); } .about-stats-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .about-stats-list li { display: flex; flex-direction: column; gap: 10px; position: relative; padding-left: 24px; } .about-stats-list li::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--ts-ink-3); } .about-stat-num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(54px, 6.5vw, 96px); line-height: 0.92; letter-spacing: -0.045em; color: var(--ts-ink-10); } .about-stat-num em { font-family: var(--font-display); font-style: italic; color: var(--ts-accent); font-size: 0.7em; vertical-align: 4px; margin-left: 2px; } .about-stat-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-6); } /* ─── CAPÍTULOS ─── */ .about-chapter { padding: 96px 0; position: relative; } .about-chapter + .about-chapter { border-top: 1px solid var(--ts-ink-3); } .about-chapter--full .container { max-width: 1100px; } .chapter-grid { display: grid; grid-template-columns: 200px 1fr; gap: 64px; align-items: start; } .about-chapter--right .chapter-body { max-width: 720px; } .about-chapter--full .chapter-body { max-width: 760px; } .chapter-meta { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 10px; } .chapter-num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ts-accent); } .chapter-kicker { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-6); } .chapter-title { font-family: var(--font-heading); font-weight: 500; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.025em; color: var(--ts-ink-10); margin: 0 0 22px; } .chapter-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ts-accent); } .chapter-lead { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; letter-spacing: -0.015em; color: var(--ts-ink-10); margin: 0 0 28px; } .chapter-body p { font-size: 16px; line-height: 1.7; color: var(--ts-ink-7); margin: 0 0 18px; } .chapter-body p em { font-family: var(--font-display); font-style: italic; color: var(--ts-accent); font-size: 1.05em; } .chapter-body p strong { color: var(--ts-ink-10); font-weight: 600; } /* ─── PULL QUOTE ─── */ .about-quote { padding: 64px 0; background: var(--ts-ink-1); border-top: 1px solid var(--ts-ink-3); border-bottom: 1px solid var(--ts-ink-3); text-align: center; } .about-quote blockquote { margin: 0; max-width: 1000px; margin-left: auto; margin-right: auto; } .about-quote p { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(36px, 5.4vw, 80px); line-height: 1.05; letter-spacing: -0.035em; color: var(--ts-ink-10); margin: 0; } .about-quote p em { color: var(--ts-accent); font-style: italic; } /* ─── TIMELINE ─── */ .timeline { list-style: none; margin: 56px 0 0; padding: 0; } .timeline-item { display: grid; grid-template-columns: 200px 1fr; gap: 64px; padding: 36px 0; border-top: 1px solid var(--ts-ink-3); } .timeline-item:last-child { border-bottom: 1px solid var(--ts-ink-3); } .timeline-meta { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 120px; align-self: start; } .timeline-num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 52px; line-height: 0.9; letter-spacing: -0.04em; color: var(--ts-accent); } .timeline-period { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-ink-7); } .timeline-years { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ts-ink-5); } .timeline-body { padding-top: 6px; } .timeline-role { font-family: var(--font-heading); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ts-ink-10); margin: 0 0 4px; } .timeline-org { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-accent); margin-bottom: 14px; } .timeline-org-logo { display: inline-block; height: 18px; width: auto; vertical-align: middle; filter: brightness(0) invert(1); opacity: .75; transition: opacity .2s ease, filter .2s ease; } .timeline-org-logo-link { display: inline-block; text-decoration: none; } .timeline-org-logo-link:hover .timeline-org-logo { opacity: 1; filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(198,255,61,.35)); } .timeline-body p { font-size: 15px; line-height: 1.7; color: var(--ts-ink-7); margin: 0; max-width: 640px; } /* ─── ANTI-POSITIONING ─── */ .about-not { background: var(--ts-ink-0); } .not-list { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .not-item { padding: 28px 28px; background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-md); position: relative; } .not-item::before { content: ""; position: absolute; top: -1px; right: -1px; width: 32px; height: 32px; border-top: 1px solid var(--ts-accent); border-right: 1px solid var(--ts-accent); border-top-right-radius: var(--radius-md); } .not-num { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 36px; line-height: 1; letter-spacing: -0.04em; color: var(--ts-accent); margin-bottom: 14px; } .not-title { font-family: var(--font-heading); font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; color: var(--ts-ink-10); margin: 0 0 10px; } .not-item p { font-size: 14.5px; line-height: 1.6; color: var(--ts-ink-7); margin: 0; } /* ─── STACK LIST ─── */ .stack-list { margin: 56px 0 0; } .stack-row { display: grid; grid-template-columns: 200px 1fr; gap: 64px; padding: 20px 0; border-top: 1px solid var(--ts-ink-3); align-items: baseline; } .stack-row:last-child { border-bottom: 1px solid var(--ts-ink-3); } .stack-cat { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-accent); margin: 0; } .stack-items { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--ts-ink-7); } /* ─── CIERRE ─── */ .about-closing { padding: 120px 0 96px; text-align: center; background: var(--ts-ink-1); border-top: 1px solid var(--ts-ink-3); } .about-closing .section-label { display: inline-flex; margin-bottom: 22px; } .about-closing-headline { font-family: var(--font-heading); font-weight: 500; font-size: clamp(40px, 6vw, 88px); line-height: 1.02; letter-spacing: -0.03em; color: var(--ts-ink-10); margin: 0 0 24px; } .about-closing-headline em { font-family: var(--font-display); font-style: italic; color: var(--ts-accent); font-weight: 400; } .about-closing-sub { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; color: var(--ts-ink-7); max-width: 620px; margin: 0 auto 36px; } .about-closing-actions { display: inline-flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; } /* ═══════════════ RESPONSIVE ═══════════════ */ @media (max-width: 1024px) { .about-hero { padding: 120px 0 72px; } .about-hero::after { display: none; } .about-hero-grid { grid-template-columns: 1fr; gap: 56px; } .about-hero-portrait { justify-self: start; max-width: 380px; } .about-stats-list { grid-template-columns: 1fr 1fr; gap: 28px; } .chapter-grid { grid-template-columns: 100px 1fr; gap: 32px; } .timeline-item { grid-template-columns: 130px 1fr; gap: 32px; } .stack-row { grid-template-columns: 130px 1fr; gap: 32px; } .not-list { grid-template-columns: 1fr; } } @media (max-width: 640px) { .about-hero { padding: 100px 0 56px; } .about-hero-title { font-size: clamp(36px, 10vw, 56px); } .about-hero-portrait { max-width: 320px; } .about-hero-portrait::before, .about-hero-portrait::after { width: 36px; height: 36px; } .about-stats { padding: 36px 0; } .about-stats-list { grid-template-columns: 1fr 1fr; gap: 22px; } .about-stats-list li { padding-left: 16px; } .about-stats-list li::before { top: 8px; bottom: 8px; } .about-stat-num { font-size: clamp(40px, 12vw, 60px); } .about-chapter { padding: 64px 0; } .chapter-grid { grid-template-columns: 1fr; gap: 20px; } .chapter-meta { position: static; flex-direction: row; align-items: baseline; gap: 14px; } .about-quote { padding: 48px 0; } .about-quote p { font-size: clamp(30px, 9vw, 48px); } .timeline-item { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; } .timeline-meta { position: static; flex-direction: row; align-items: baseline; gap: 16px; flex-wrap: wrap; } .timeline-num { font-size: 36px; } .stack-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; } .about-closing { padding: 80px 0 64px; } .about-closing-actions { flex-direction: column; gap: 16px; align-items: stretch; } .about-closing-actions .btn { width: 100%; justify-content: center; } } /* ============================================================ BONO DE HORAS — Editorial pricing ============================================================ */ /* ─── HERO ─── */ .bonus-hero { padding: 140px 0 72px; background: var(--gradient-hero); text-align: left; } .bonus-hero .container { max-width: 920px; } .bonus-hero .section-label { margin-bottom: 28px; } .bonus-hero-title { font-family: var(--font-heading); font-weight: 500; font-size: clamp(40px, 5.8vw, 84px); line-height: 1.02; letter-spacing: -0.03em; color: var(--ts-ink-10); margin: 0 0 28px; max-width: 880px; } .bonus-hero-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ts-accent); letter-spacing: -0.035em; } .bonus-hero-sub { font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; color: var(--ts-ink-7); max-width: 640px; margin: 0 0 32px; } .bonus-hero-sub strong { color: var(--ts-ink-10); font-weight: 600; } .bonus-hero-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 28px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-ink-6); } .bonus-hero-meta li { display: inline-flex; align-items: center; } .bonus-hero-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ts-accent); margin-right: 10px; box-shadow: 0 0 6px rgba(198,255,61,.55); } /* ─── Section headers compartidos ─── */ .bonus-section-header { max-width: 760px; margin: 0 0 48px; } .bonus-section-header .section-title { margin-bottom: 16px; } .bonus-section-header .section-title em { font-family: var(--font-display); font-style: italic; color: var(--ts-accent); font-weight: 400; } /* ─── PRICING TABLE ─── */ .bonus-packs { padding: 80px 0; background: var(--ts-ink-1); border-top: 1px solid var(--ts-ink-3); border-bottom: 1px solid var(--ts-ink-3); } .bonus-packs-header { max-width: 760px; margin: 0 0 48px; } .bonus-packs-header .section-title { margin-bottom: 14px; } .pack-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .pack-card { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; background: var(--ts-ink-0); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-md); transition: border-color .2s ease, transform .25s cubic-bezier(.65,0,.35,1), box-shadow .25s ease; } .pack-card:hover { border-color: var(--ts-ink-4); transform: translateY(-4px); } .pack-card--featured { border-color: var(--ts-accent); background: linear-gradient(180deg, rgba(198,255,61,.04), var(--ts-ink-0) 80%); } .pack-card--featured:hover { border-color: var(--ts-accent); box-shadow: 0 16px 40px rgba(198,255,61,.08); } .pack-badge { position: absolute; top: -10px; left: 22px; padding: 4px 10px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ts-accent-ink); background: var(--ts-accent); border-radius: 999px; } .pack-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--ts-ink-3); } .pack-num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.04em; color: var(--ts-accent); } .pack-context { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ts-ink-6); text-align: right; } .pack-hours { margin: 22px 0 4px; display: flex; align-items: baseline; gap: 8px; } .pack-hours-num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(56px, 5vw, 72px); line-height: 0.9; letter-spacing: -0.045em; color: var(--ts-ink-10); } .pack-hours-unit { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-ink-6); } .pack-rate { margin: 4px 0 18px; display: flex; align-items: baseline; gap: 6px; } .pack-rate-num { font-family: var(--font-heading); font-weight: 500; font-size: 17px; color: var(--ts-ink-10); letter-spacing: -0.01em; } .pack-rate-unit { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ts-ink-6); } .pack-total { padding: 14px 0 16px; margin: 0 0 16px; border-top: 1px solid var(--ts-ink-3); display: flex; flex-direction: column; gap: 2px; } .pack-total-num { font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--ts-ink-10); } .pack-card--featured .pack-total-num { color: var(--ts-accent); } .pack-total-tax { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ts-ink-6); } .pack-fit { flex: 1; font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; color: var(--ts-ink-7); margin: 0 0 18px; } .pack-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-ink-7); padding-bottom: 6px; border-bottom: 1px solid var(--ts-ink-3); text-decoration: none; transition: color .2s ease, border-color .2s ease, gap .2s ease; } .pack-cta:hover { color: var(--ts-accent); border-color: var(--ts-accent); gap: 12px; } .pack-card--featured .pack-cta { color: var(--ts-accent); border-color: var(--ts-accent); } .bonus-packs-note { margin-top: 36px; font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: var(--ts-ink-6); text-align: center; } .bonus-packs-note a { color: var(--ts-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } /* ─── USOS GRID ─── */ .bonus-uses { padding: 80px 0 56px; } .bonus-uses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .use-item { padding: 26px 24px; background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: var(--radius-md); transition: border-color .2s ease; } .use-item:hover { border-color: var(--ts-ink-4); } .use-num { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: -0.04em; color: var(--ts-accent); margin-bottom: 14px; } .use-title { font-family: var(--font-heading); font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; color: var(--ts-ink-10); margin: 0 0 10px; } .use-item p { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--ts-ink-7); margin: 0; } /* ─── RULES (cómo funciona) ─── */ .bonus-rules { padding: 56px 0 72px; background: var(--ts-ink-1); border-top: 1px solid var(--ts-ink-3); border-bottom: 1px solid var(--ts-ink-3); } .rules-list { margin: 0; display: grid; gap: 0; } .rule-row { display: grid; grid-template-columns: 100px 1fr; gap: 40px; padding: 28px 0; border-top: 1px solid var(--ts-ink-3); align-items: baseline; } .rule-row:last-child { border-bottom: 1px solid var(--ts-ink-3); } .rule-num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 48px; line-height: 1; letter-spacing: -0.04em; color: var(--ts-accent); } .rule-title { font-family: var(--font-heading); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--ts-ink-10); margin: 0 0 10px; } .rule-body dd { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--ts-ink-7); max-width: 720px; } /* ─── FIT (encaje) ─── */ .bonus-fit { padding: 72px 0; } /* ─── FAQ ─── */ .bonus-faq { padding: 72px 0 56px; background: var(--ts-ink-1); border-top: 1px solid var(--ts-ink-3); border-bottom: 1px solid var(--ts-ink-3); } /* ═══════════ RESPONSIVE ═══════════ */ @media (max-width: 1100px) { .pack-grid { grid-template-columns: repeat(3, 1fr); } .pack-card:nth-child(4), .pack-card:nth-child(5) { grid-column: span 1; } } @media (max-width: 768px) { .bonus-hero { padding: 110px 0 56px; } .bonus-section-header { margin-bottom: 32px; } .pack-grid { grid-template-columns: 1fr; gap: 18px; } .bonus-uses-grid { grid-template-columns: 1fr; gap: 18px; } .rule-row { grid-template-columns: 60px 1fr; gap: 20px; } .rule-num { font-size: 36px; } .bonus-rules { padding: 48px 0 56px; } .bonus-uses { padding: 56px 0 36px; } .bonus-fit { padding: 56px 0; } .bonus-faq { padding: 56px 0 36px; } } @media (max-width: 480px) { .pack-head { flex-direction: column; align-items: flex-start; gap: 4px; } .pack-context { text-align: left; } } /* ============================================================ TEL: links — móvil llama directo, desktop muestra el número ============================================================ */ /* Desktop (hover): tooltip discreto con el número arriba del link */ @media (hover: hover) and (pointer: fine) { a[href^="tel:"] { position: relative; cursor: copy; } a[href^="tel:"]::after { content: attr(href); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 6px 12px; background: var(--ts-ink-1); border: 1px solid var(--ts-ink-3); border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; color: var(--ts-accent); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 100; } a[href^="tel:"]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ============================================================ PÁGINA CONTACTO · /contacto ============================================================ */ .page-contact main { background: var(--ts-ink, #0A0B0D); } .contact-hero { padding-top: clamp(110px, 14vh, 160px); padding-bottom: 40px; } .contact-hero-meta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 245, 241, 0.5); } .contact-hero-meta-item { display: inline-flex; align-items: center; gap: 8px; } .contact-hero-meta-item strong { color: var(--ts-accent, #C6FF3D); font-weight: 600; } .contact-section { padding: clamp(40px, 6vh, 70px) 0 clamp(60px, 8vh, 100px); } .page-contact .contact-section .contact-info .section-title em, .page-contact .contact-section .contact-info .section-title i { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--ts-accent, #C6FF3D); font-weight: 400; } .contact-faq { padding: clamp(60px, 8vh, 100px) 0; background: var(--ts-ink, #0A0B0D); border-top: 1px solid rgba(255,255,255,0.06); } .page-contact .footer-signoff-cta { font-size: 13px; } /* ============================================================ BLOG POST · página individual (editorial, TOC, callouts, etc.) ============================================================ */ .page-blog-post { background: var(--ts-ink, #0A0B0D); } .blogpost { display: block; } /* ── HERO ────────────────────────────────────────────────────── */ .blogpost-hero { padding: clamp(110px, 14vh, 160px) 0 clamp(40px, 6vh, 64px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .blogpost-breadcrumb { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 245, 241, 0.45); margin-bottom: 28px; } .blogpost-breadcrumb a { color: rgba(245, 245, 241, 0.75); text-decoration: none; transition: color 0.2s ease; } .blogpost-breadcrumb a:hover { color: var(--ts-accent, #C6FF3D); } .blogpost-breadcrumb [aria-current="page"] { color: var(--ts-accent, #C6FF3D); } .blogpost-breadcrumb span[aria-hidden] { color: rgba(245, 245, 241, 0.25); } .blogpost-eyebrow { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-accent, #C6FF3D); margin-bottom: 22px; font-weight: 500; } .blogpost-title { font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.14; letter-spacing: -0.028em; color: #fff; max-width: 980px; margin: 0 0 24px; } .blogpost-intro { font-size: clamp(17px, 1.9vw, 22px); line-height: 1.55; color: rgba(245, 245, 241, 0.78); max-width: 780px; margin: 0 0 32px; letter-spacing: -0.005em; font-weight: 400; } .blogpost-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 245, 241, 0.5); } .blogpost-meta-item { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: inherit; transition: color 0.2s ease; } .blogpost-meta-author:hover { color: var(--ts-accent, #C6FF3D); } .blogpost-meta-sep { opacity: 0.35; } .blogpost-author-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ts-accent, #C6FF3D); display: inline-block; } /* ── GRID: TOC sticky + article ──────────────────────────────── */ .blogpost-body { padding: clamp(50px, 8vh, 90px) 0 clamp(60px, 8vh, 100px); background: var(--ts-ink, #0A0B0D); } .blogpost-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(40px, 6vw, 72px); align-items: start; } @media (max-width: 1024px) { .blogpost-grid { grid-template-columns: 1fr; gap: 24px; } } .blogpost-toc { position: sticky; top: 90px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: thin; padding-right: 8px; } .blogpost-toc::-webkit-scrollbar { width: 4px; } .blogpost-toc::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; } .blogpost-toc-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-accent, #C6FF3D); margin-bottom: 18px; font-weight: 500; } .blogpost-toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid rgba(255, 255, 255, 0.06); } .blogpost-toc-link { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px 8px 16px; font-family: 'Inter Tight', sans-serif; font-size: 13.5px; line-height: 1.4; color: rgba(245, 245, 241, 0.55); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; letter-spacing: -0.005em; } .blogpost-toc-link:hover { color: #fff; border-left-color: rgba(198, 255, 61, 0.4); } .blogpost-toc-link.is-active { color: var(--ts-accent, #C6FF3D); border-left-color: var(--ts-accent, #C6FF3D); background: rgba(198, 255, 61, 0.04); } .blogpost-toc-num { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: rgba(245, 245, 241, 0.35); padding-top: 2px; flex-shrink: 0; } .blogpost-toc-link.is-active .blogpost-toc-num { color: var(--ts-accent, #C6FF3D); } .blogpost-toc-text { display: block; } @media (max-width: 1024px) { .blogpost-toc { position: static; max-height: none; padding: 22px 24px; background: #111317; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; } } /* ── ARTICLE ─────────────────────────────────────────────────── */ .blogpost-article { max-width: 760px; } .blogpost-article p { font-size: 17px; line-height: 1.75; color: rgba(245, 245, 241, 0.85); margin: 0 0 22px; letter-spacing: -0.003em; } .blogpost-article p strong { color: #fff; font-weight: 600; } .blogpost-article p em, .blogpost-article p i { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--ts-accent, #C6FF3D); font-weight: 400; letter-spacing: -0.005em; } .blogpost-article a { color: var(--ts-accent, #C6FF3D); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness 0.2s ease; } .blogpost-article a:hover { text-decoration-thickness: 2px; } /* Lead paragraph (después del hero, antes del TLDR) */ .blogpost-lead { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: clamp(22px, 2.4vw, 28px) !important; line-height: 1.45 !important; color: rgba(245, 245, 241, 0.92) !important; margin: 0 0 40px !important; letter-spacing: -0.01em; padding-left: 18px; border-left: 2px solid var(--ts-accent, #C6FF3D); } /* TL;DR / key takeaways */ .blogpost-tldr { padding: 28px 32px; background: linear-gradient(180deg, rgba(198, 255, 61, 0.05), rgba(198, 255, 61, 0.01)); border: 1px solid rgba(198, 255, 61, 0.22); border-radius: 14px; margin: 0 0 48px; } .blogpost-tldr-eyebrow { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-accent, #C6FF3D); margin-bottom: 8px; font-weight: 500; } .blogpost-tldr-title { font-family: 'Inter Tight', sans-serif; font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; color: #fff; margin: 0 0 18px; } .blogpost-tldr-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .blogpost-tldr-list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; color: rgba(245, 245, 241, 0.82); letter-spacing: -0.003em; } .blogpost-tldr-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--ts-accent, #C6FF3D); box-shadow: 0 0 0 3px rgba(198, 255, 61, 0.15); } .blogpost-tldr-list li strong { color: #fff; } /* Headings con anchor permalink */ .blogpost-section { margin: 0 0 44px; scroll-margin-top: 90px; } .blogpost-h2 { font-family: 'Inter Tight', sans-serif; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -0.025em; font-weight: 500; color: #fff; margin: 0 0 22px; padding-top: 8px; position: relative; scroll-margin-top: 90px; } .blogpost-anchor { font-family: 'JetBrains Mono', monospace; color: rgba(245, 245, 241, 0.2); font-weight: 400; text-decoration: none !important; margin-right: 8px; transition: color 0.2s ease; user-select: none; } .blogpost-h2:hover .blogpost-anchor { color: var(--ts-accent, #C6FF3D); } .blogpost-h3 { font-family: 'Inter Tight', sans-serif; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; color: #fff; margin: 32px 0 14px; scroll-margin-top: 90px; } /* Listas (sin numerar y numeradas) */ .blogpost-list, .blogpost-article ol, .blogpost-article ul { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; } .blogpost-list li, .blogpost-article ol li, .blogpost-article ul li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: rgba(245, 245, 241, 0.85); } .blogpost-list li::before, .blogpost-article ul li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; background: var(--ts-accent, #C6FF3D); border-radius: 50%; } .blogpost-article ol { counter-reset: bplist; } .blogpost-article ol li::before { counter-increment: bplist; content: counter(bplist, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ts-accent, #C6FF3D); font-weight: 600; } /* Pull-quote */ .blogpost-pullquote { position: relative; margin: 36px 0; padding: 0 0 0 24px; border-left: 3px solid var(--ts-accent, #C6FF3D); } .blogpost-pullquote p { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-size: clamp(24px, 3vw, 32px) !important; line-height: 1.35 !important; color: #fff !important; margin: 0 !important; letter-spacing: -0.01em; } /* Callouts (tip / warning / note / danger) */ .blogpost-callout { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px 24px; border-radius: 12px; margin: 28px 0; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); } .blogpost-callout-icon { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; } .blogpost-callout-body p { margin: 0; font-size: 15px !important; line-height: 1.6 !important; color: rgba(245, 245, 241, 0.85) !important; } .blogpost-callout-title { display: block; font-family: 'Inter Tight', sans-serif; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; letter-spacing: -0.005em; } .blogpost-callout--tip { background: rgba(198, 255, 61, 0.05); border-color: rgba(198, 255, 61, 0.25); } .blogpost-callout--tip .blogpost-callout-icon { color: var(--ts-accent, #C6FF3D); } .blogpost-callout--warning { background: rgba(255, 180, 74, 0.05); border-color: rgba(255, 180, 74, 0.3); } .blogpost-callout--warning .blogpost-callout-icon { color: #FFB44A; } .blogpost-callout--danger { background: rgba(255, 102, 102, 0.05); border-color: rgba(255, 102, 102, 0.3); } .blogpost-callout--danger .blogpost-callout-icon { color: #FF6B6B; } .blogpost-callout--note { background: rgba(154, 162, 174, 0.05); border-color: rgba(154, 162, 174, 0.25); } .blogpost-callout--note .blogpost-callout-icon { color: #9AA2AE; } /* Author note (signature al final) */ .blogpost-authornote { margin: 48px 0 0; padding: 28px 32px; background: #111317; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start; } .blogpost-authornote-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--ts-accent, #C6FF3D); color: #0A0B0D; display: grid; place-items: center; font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.04em; } .blogpost-authornote-kicker { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ts-accent, #C6FF3D); margin-bottom: 8px; font-weight: 500; } .blogpost-authornote p { margin: 0 0 12px; font-size: 15.5px !important; line-height: 1.6 !important; color: rgba(245, 245, 241, 0.85) !important; } .blogpost-authornote-link { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ts-accent, #C6FF3D); text-decoration: none !important; font-weight: 500; } .blogpost-authornote-link:hover { color: #fff; } @media (max-width: 600px) { .blogpost-authornote { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; } .blogpost-authornote-avatar { width: 48px; height: 48px; font-size: 15px; } .blogpost-tldr { padding: 22px 22px; } .blogpost-lead { font-size: 20px !important; padding-left: 14px; } .blogpost-pullquote { padding-left: 18px; } .blogpost-pullquote p { font-size: 22px !important; } } /* FAQ + CTA + related en blog post */ .blogpost-faq { padding: clamp(60px, 8vh, 90px) 0; background: var(--ts-ink, #0A0B0D); border-top: 1px solid rgba(255,255,255,0.06); } .blogpost-cta { padding: clamp(60px, 8vh, 100px) 0; background: var(--ts-ink, #0A0B0D); } .blogpost-related { padding: clamp(70px, 9vh, 110px) 0 clamp(60px, 8vh, 100px); background: var(--ts-ink, #0A0B0D); border-top: 1px solid rgba(255,255,255,0.06); } .blogpost-related .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 40px; } /* ============================================================ INSIGHTS CAROUSEL — home (últimos 8 posts en carrusel horizontal) ============================================================ */ .insights-carousel-section { padding: clamp(80px, 10vh, 120px) 0; position: relative; } .insights-carousel-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; text-align: left !important; max-width: none !important; margin-bottom: 44px !important; flex-wrap: wrap; } .insights-header-text { max-width: 680px; } .insights-header-text .section-title { text-align: left !important; } .insights-header-text .section-subtitle { text-align: left !important; margin-left: 0; } .insights-header-actions { display: flex; align-items: center; flex-shrink: 0; } .insights-see-all { font-size: 14px; } .insights-carousel { position: relative; } .insights-carousel-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-left: 0; -webkit-overflow-scrolling: touch; cursor: grab; /* Fade en bordes para indicar más contenido */ mask-image: linear-gradient(90deg, transparent 0, black 24px, black calc(100% - 60px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, black 24px, black calc(100% - 60px), transparent 100%); /* Scrollbar oculto */ scrollbar-width: none; } .insights-carousel-viewport::-webkit-scrollbar { display: none; } .insights-carousel-viewport.is-dragging { cursor: grabbing; } .insights-carousel-viewport:focus-visible { outline: 2px solid var(--ts-accent, #C6FF3D); outline-offset: 4px; border-radius: 14px; } .insights-carousel-track { display: flex; gap: 24px; list-style: none; padding: 4px 4px 4px 0; margin: 0; } .insights-carousel-item { flex: 0 0 clamp(280px, 32vw, 360px); scroll-snap-align: start; } .insights-carousel-item .insight-card { width: 100%; height: 100%; display: flex; flex-direction: column; user-select: none; /* evita seleccionar al arrastrar */ } /* Controles bajo el carrusel */ .insights-carousel-controls { display: flex; align-items: center; gap: 18px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .insights-carousel-btn { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(245, 245, 241, 0.85); display: grid; place-items: center; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .insights-carousel-btn:hover:not(:disabled) { background: rgba(198, 255, 61, 0.08); border-color: var(--ts-accent, #C6FF3D); color: var(--ts-accent, #C6FF3D); transform: translateY(-1px); } .insights-carousel-btn:disabled { opacity: 0.3; cursor: not-allowed; } .insights-carousel-progress { flex: 1; height: 2px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; } .insights-carousel-progress-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ts-accent, #C6FF3D), #aef03c); border-radius: 2px; transition: width 0.25s ease; } @media (max-width: 768px) { .insights-carousel-header { flex-direction: column; align-items: flex-start; gap: 18px; } .insights-carousel-item { flex-basis: 78vw; } .insights-carousel-btn { display: none; } .insights-carousel-controls { border-top: 0; padding-top: 0; margin-top: 14px; gap: 0; } } /* ============================================================ BLOG HUB — /blog (lista completa + filtros) ============================================================ */ .page-blog main { background: var(--ts-ink, #0A0B0D); } .blog-hero { padding-top: clamp(120px, 16vh, 180px); padding-bottom: 40px; } .blog-hero .section-label::before { background: var(--ts-accent); } .blog-hero-meta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 245, 241, 0.5); } .blog-hero-meta-item { display: inline-flex; align-items: center; gap: 8px; } /* Filtros · chips */ .blog-filters { padding: 16px 0 8px; background: var(--ts-ink, #0A0B0D); position: sticky; top: 70px; z-index: 30; border-top: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(10, 11, 13, 0.86); } .blog-filters-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; } .blog-filters-row::-webkit-scrollbar { display: none; } .blog-filter-chip { flex-shrink: 0; padding: 8px 16px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; color: rgba(245, 245, 241, 0.7); font-family: 'Inter Tight', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: -0.003em; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; display: inline-flex; align-items: center; gap: 6px; } .blog-filter-chip:hover { border-color: rgba(198, 255, 61, 0.4); color: #fff; } .blog-filter-chip.is-active { background: rgba(198, 255, 61, 0.1); border-color: var(--ts-accent, #C6FF3D); color: var(--ts-accent, #C6FF3D); } .blog-filter-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(245, 245, 241, 0.4); } .blog-filter-chip.is-active .blog-filter-count { color: rgba(198, 255, 61, 0.7); } /* Grid */ .blog-grid-section { padding: 48px 0 80px; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; } .blog-card { position: relative; animation: blogCardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--card-delay, 0ms); } @keyframes blogCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .blog-card-link { display: flex; flex-direction: column; height: 100%; padding: 28px 26px 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; color: inherit; text-decoration: none; transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease; } .blog-card-link:hover { border-color: rgba(198, 255, 61, 0.35); transform: translateY(-3px); background: linear-gradient(180deg, rgba(198, 255, 61, 0.03), rgba(255, 255, 255, 0.005)); } .blog-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .blog-card-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-accent, #C6FF3D); font-weight: 500; } .blog-card-index { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; color: rgba(245, 245, 241, 0.35); } .blog-card-title { font-family: 'Inter Tight', sans-serif; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; color: #fff; margin: 0 0 12px; } .blog-card-desc { font-size: 14.5px; line-height: 1.55; color: rgba(245, 245, 241, 0.68); margin: 0 0 22px; letter-spacing: -0.003em; flex: 1; } .blog-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .blog-card-read { color: rgba(245, 245, 241, 0.55); transition: color 0.2s ease; } .blog-card-link:hover .blog-card-read { color: var(--ts-accent, #C6FF3D); } .blog-card-arrow { font-size: 16px; color: rgba(245, 245, 241, 0.5); transition: transform 0.25s ease, color 0.2s ease; } .blog-card-link:hover .blog-card-arrow { transform: translateX(4px); color: var(--ts-accent, #C6FF3D); } .blog-empty { padding: 60px 0; text-align: center; color: rgba(245, 245, 241, 0.5); font-size: 15px; } .page-blog .final-cta { padding: clamp(60px, 8vh, 100px) 0; } .page-blog .final-cta-text { max-width: 600px; margin: 18px auto 32px; font-size: 16px; line-height: 1.65; color: rgba(245, 245, 241, 0.75); text-align: center; letter-spacing: -0.005em; } .page-blog .final-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } @media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } .blog-filters { top: 60px; } } /* Nav: feature link (Calculadora Plus en main menu) */ .nav-links .nav-link-feature { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 14px; border: 1px solid rgba(198, 255, 61, 0.35); border-radius: 999px; background: rgba(198, 255, 61, 0.06); color: #fff; font-weight: 500; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .nav-links .nav-link-feature:hover { background: rgba(198, 255, 61, 0.12); border-color: rgba(198, 255, 61, 0.6); transform: translateY(-1px); } .nav-link-feature-pill { display: inline-block; padding: 2px 7px; background: var(--ts-accent, #C6FF3D); color: #0A0B0D; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; line-height: 1.2; } /* ============================================================ SERVICE PAGES — EDITORIAL EXTENDED CONTENT (2026-05) TL;DR · Tabla editorial · Listas · Callouts · Pull-quotes · Footer coverage ============================================================ */ /* ─── TL;DR wrapper: aire arriba/abajo, mantiene el ritmo del flujo ─── */ .service-page-tldr-wrap { padding: 36px 0 8px; } .service-page-tldr-wrap .blogpost-tldr { margin-bottom: 0; } /* ─── Bloques internos dentro de .service-page-card ─── */ .service-page-card .blogpost-list { margin: 22px 0 4px; padding: 0; list-style: none; } .service-page-card .blogpost-list li { position: relative; padding: 0 0 0 26px; margin: 0 0 12px; font-family: var(--font-body); font-size: 15.5px; line-height: 1.6; color: var(--ts-ink-7); } .service-page-card .blogpost-list li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--ts-accent); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; } .service-page-card .blogpost-list li strong { color: var(--ts-ink-10); font-weight: 600; } .service-page-card .blogpost-list li em, .service-page-card .blogpost-list li i { font-family: var(--font-display); font-style: italic; color: var(--ts-ink-10); } /* ─── Callouts dentro de service-page-card (note / danger / warning) ─── */ .service-page-card .blogpost-callout { display: block; margin: 26px 0 4px; padding: 20px 24px 22px; border-radius: 12px; border: 1px solid var(--ts-ink-3); background: var(--ts-ink-2); position: relative; } .service-page-card .blogpost-callout::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; border-radius: 12px 0 0 12px; background: var(--ts-accent); } .service-page-card .blogpost-callout--danger::before { background: #FF5C5C; } .service-page-card .blogpost-callout--warning::before { background: #F5B843; } .service-page-card .blogpost-callout--note::before { background: var(--ts-accent); } .service-page-card .blogpost-callout-title { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ts-accent); margin-bottom: 8px; } .service-page-card .blogpost-callout--danger .blogpost-callout-title { color: #FF7A7A; } .service-page-card .blogpost-callout--warning .blogpost-callout-title { color: #F5B843; } .service-page-card .blogpost-callout-body p, .service-page-card .blogpost-callout p { margin: 0; color: var(--ts-ink-7); font-size: 15px; line-height: 1.6; } .service-page-card .blogpost-callout strong { color: var(--ts-ink-10); } .service-page-card .blogpost-callout em, .service-page-card .blogpost-callout i { font-family: var(--font-display); font-style: italic; color: var(--ts-ink-8); } .service-page-card .blogpost-callout a { color: var(--ts-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* ─── Pull-quote editorial dentro de service-page-card ─── */ .service-page-card .blogpost-pullquote { margin: 28px 0 6px; padding: 4px 0 4px 22px; border-left: 2px solid var(--ts-accent); } .service-page-card .blogpost-pullquote p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.4; color: var(--ts-ink-10); letter-spacing: -0.005em; } /* ============================================================ TABLA EDITORIAL — comparativas Plus vs Advanced, TCO, etc. Sin verticales, hairlines tenues, headers mono uppercase accent, última fila con realce accent (típicamente "total"). ============================================================ */ .service-page-table-wrap { margin: 28px -8px 6px; padding: 0 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .service-page-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 15px; color: var(--ts-ink-8); font-variant-numeric: tabular-nums lining-nums; } .service-page-table caption { caption-side: top; text-align: left; padding: 0 0 18px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-6); } .service-page-table caption::before { content: "▸"; display: inline-block; color: var(--ts-accent); margin-right: 10px; transform: translateY(-1px); } .service-page-table thead th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-accent); text-align: left; padding: 0 18px 14px; border-bottom: 1px solid var(--ts-ink-3); white-space: nowrap; background: transparent; } .service-page-table thead th:first-child { padding-left: 0; } .service-page-table thead th:last-child { padding-right: 0; text-align: right; } .service-page-table tbody th { font-family: var(--font-heading), 'Inter Tight', sans-serif; font-weight: 500; font-size: 15px; color: var(--ts-ink-10); text-align: left; padding: 16px 18px 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05); letter-spacing: -0.005em; white-space: normal; } .service-page-table tbody td { padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--ts-ink-7); font-family: var(--font-body); white-space: nowrap; } .service-page-table tbody td:last-child { text-align: right; padding-right: 0; } .service-page-table tbody tr:hover th, .service-page-table tbody tr:hover td { background: rgba(198,255,61,0.025); } .service-page-table tbody td strong, .service-page-table tbody th strong { color: var(--ts-ink-10); font-weight: 600; } /* Última fila: típicamente "TCO total" o cifra resumen — realzar en accent */ .service-page-table tbody tr:last-child th, .service-page-table tbody tr:last-child td { border-bottom: 0; background: linear-gradient(180deg, rgba(198,255,61,0.06) 0%, rgba(198,255,61,0.01) 100%); color: var(--ts-ink-10); font-weight: 500; } .service-page-table tbody tr:last-child strong { color: var(--ts-accent); font-weight: 600; } .service-page-table tbody tr:last-child th { font-family: var(--font-display), 'Inter Tight', sans-serif; font-weight: 500; } @media (max-width: 720px) { .service-page-table { font-size: 14px; } .service-page-table thead th { font-size: 9.5px; letter-spacing: 0.18em; } .service-page-table tbody th, .service-page-table tbody td { padding: 14px 14px; } .service-page-table tbody td { white-space: normal; } } /* ============================================================ FOOTER COVERAGE — bloque "Cobertura geográfica" antes del footer ============================================================ */ .footer-coverage { background: var(--ts-ink-1); border-top: 1px solid var(--ts-ink-3); border-bottom: 1px solid var(--ts-ink-3); padding: clamp(40px, 5vw, 56px) 0; } .footer-coverage-inner { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; } .footer-coverage-head { display: flex; flex-direction: column; gap: 14px; } .footer-coverage-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ts-ink-6); } .footer-coverage-eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--ts-accent); } .footer-coverage-title { font-family: var(--font-heading), 'Inter Tight', sans-serif; font-weight: 500; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.015em; color: var(--ts-ink-10); margin: 0; } .footer-coverage-title em, .footer-coverage-title i { font-family: var(--font-display), 'Inter Tight', sans-serif; font-style: italic; color: var(--ts-accent); font-weight: 400; } .footer-coverage-text { font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: var(--ts-ink-6); margin: 0; max-width: 56ch; } .footer-coverage-text a { color: var(--ts-ink-10); text-decoration: underline; text-decoration-color: var(--ts-accent); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s ease; } .footer-coverage-text a:hover { color: var(--ts-accent); } .footer-coverage-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 28px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; } .footer-coverage-nav a { position: relative; display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 0; color: var(--ts-ink-7); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.04); transition: color .2s ease, padding .25s cubic-bezier(.65,0,.35,1); } .footer-coverage-nav a::before { content: "→"; font-size: 11px; color: var(--ts-ink-5); transition: color .2s ease, transform .25s cubic-bezier(.65,0,.35,1); } .footer-coverage-nav a:hover { color: var(--ts-accent); padding-left: 6px; } .footer-coverage-nav a:hover::before { color: var(--ts-accent); transform: translateX(2px); } @media (max-width: 820px) { .footer-coverage-inner { grid-template-columns: 1fr; gap: 28px; } .footer-coverage-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } } @media (max-width: 460px) { .footer-coverage-nav { grid-template-columns: 1fr; } } /* ─── Glosario · enlace "Saber más" por término ─── */ .glossary-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ts-ink-6); text-decoration: none; transition: color .2s ease, gap .2s cubic-bezier(.65,0,.35,1); } .glossary-link:hover { color: var(--ts-accent); gap: 10px; } .glossary-link span { color: var(--ts-accent); }