/** * G-CERTI Argentina - Certification Landing Styles * Version: 2026.7.1 ULTRA PRO + A11Y * * NOTA: Los colores específicos por norma ISO se definen en accessibility.css * usando el atributo data-iso en el body. Este archivo define los fallbacks. */ /* ============================================================================ CERT ACCENT TOKENS (per-page) Each certification page sets `--cert-color` on . Per-ISO colors are defined in accessibility.css via data-iso attribute. ============================================================================ */ .q-page-certification { /* Fallbacks para browsers sin color-mix o cuando no hay data-iso */ --q-cert: var(--cert-color, #E63935); --q-cert-dark: #B22D2A; --q-cert-tint-1: rgba(230, 57, 53, 0.16); --q-cert-tint-2: rgba(230, 57, 53, 0.07); --q-cert-border: rgba(230, 57, 53, 0.32); --q-cert-glow: rgba(230, 57, 53, 0.30); } /* Browsers con soporte color-mix - override inteligente */ @supports (color: color-mix(in srgb, red 50%, blue)) { .q-page-certification { --q-cert-dark: color-mix(in srgb, var(--q-cert) 72%, black); --q-cert-tint-1: color-mix(in srgb, var(--q-cert) 16%, white); --q-cert-tint-2: color-mix(in srgb, var(--q-cert) 7%, white); --q-cert-border: color-mix(in srgb, var(--q-cert) 32%, #e2e8f0); --q-cert-glow: color-mix(in srgb, var(--q-cert) 30%, transparent); } } /* ============================================================================ CERTIFICATION HERO ============================================================================ */ .q-cert-hero { position: relative; padding: calc(var(--q-header-h) + var(--space-8)) 0 var(--space-16); overflow: hidden; min-height: 80vh; display: flex; align-items: center; background: var(--gradient-hero-dark); color: var(--gc-white); /* Dark surface tokens (layout.css sets glass for light background) */ --gc-text-primary: var(--gc-white); --gc-text-secondary: var(--gc-gray-300); --gc-text-muted: var(--gc-gray-400); --glass-bg: rgba(255, 255, 255, 0.03); --glass-bg-hover: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.10); /* Neutral accent for dark hero (avoid red on black) */ --q-cert-hero: rgba(255, 255, 255, 0.92); --q-cert-hero-glow: rgba(255, 255, 255, 0.28); } .q-cert-hero .q-container { position: relative; z-index: 2; } .q-cert-hero .q-h1 { color: var(--gc-white); } .q-cert-hero-content { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-12); align-items: center; } .q-cert-badge { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: linear-gradient(135deg, color-mix(in srgb, var(--q-cert, var(--gc-primary)) 88%, white), var(--q-cert-dark, var(--gc-primary-dark))); border-radius: var(--radius-xl); margin-bottom: var(--space-6); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 18px 55px var(--q-cert-glow, rgba(var(--gc-primary-rgb), 0.28)); } .q-cert-hero .q-cert-badge { background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78)); border-color: rgba(255, 255, 255, 0.24); box-shadow: 0 18px 55px var(--q-cert-hero-glow); } .q-cert-code { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; color: var(--q-white); } .q-cert-hero .q-cert-code { color: var(--gc-slate-900); } .q-cert-subtitle { font-size: var(--text-xl); color: var(--q-cert, var(--cert-color, var(--q-primary-light))); margin-bottom: var(--space-4); } .q-cert-hero .q-cert-subtitle { color: rgba(255, 255, 255, 0.82); } .q-cert-description { font-size: var(--text-lg); color: var(--q-gray-300); margin-bottom: var(--space-8); line-height: var(--leading-relaxed); } .q-cert-hero-stats { display: flex; gap: var(--space-8); margin-bottom: var(--space-8); } .q-cert-stat { text-align: left; } .q-cert-stat-value { display: block; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; color: var(--q-white); } .q-cert-stat-label { font-size: var(--text-sm); color: var(--q-gray-400); } .q-cert-hero-cta { display: flex; gap: var(--space-4); } .q-cert-hero .q-gradient-text { color: var(--q-white); background: linear-gradient(135deg, var(--q-white), color-mix(in srgb, var(--q-cert, var(--gc-primary)) 82%, white)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Make CTAs match the certification accent */ .q-page-certification .q-btn-primary { background: var(--q-cert, var(--gc-primary)); color: var(--gc-white); box-shadow: 0 18px 55px var(--q-cert-glow, rgba(var(--gc-primary-rgb), 0.28)); } .q-page-certification .q-btn-primary:hover { background: var(--q-cert-dark, var(--gc-primary-dark)); color: var(--gc-white); box-shadow: 0 22px 70px var(--q-cert-glow, rgba(var(--gc-primary-rgb), 0.32)); } .q-page-certification .q-btn-secondary { color: var(--q-cert, var(--gc-primary)); border-color: var(--q-cert, var(--gc-primary)); } .q-page-certification .q-btn-secondary:hover { background: var(--q-cert, var(--gc-primary)); color: var(--gc-white); } .q-page-certification .q-badge-dot { background: var(--q-cert, var(--gc-primary)); } .q-page-certification .q-badge-primary, .q-page-certification .q-badge-new { background: var(--q-cert-tint-2, rgba(var(--gc-primary-rgb), 0.12)); border-color: var(--q-cert-border, rgba(var(--gc-primary-rgb), 0.22)); color: var(--q-cert-dark, var(--gc-primary)); } .q-page-certification .q-section-header::after { content: ''; display: block; width: min(160px, 45vw); height: 3px; margin: var(--space-5) auto 0; border-radius: var(--radius-full); background: linear-gradient(90deg, transparent, var(--q-cert, var(--gc-primary)), transparent); opacity: 0.65; } .q-page-certification .q-intro-stat-value { color: var(--q-cert, var(--gc-primary)); } .q-page-certification .q-accent { color: var(--q-cert, var(--gc-primary)); } .q-page-certification .q-hero-orb-1 { background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 35%, transparent 65%); } /* ============================================================================ HERO BACKGROUND (q-hero-bg / orbs) Used by certification pages + mini heroes (nosotros/certificaciones) ============================================================================ */ .q-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .q-hero-bg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 120px 120px; opacity: 0.14; animation: qHeroGrid 32s linear infinite; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 100%); } /* radial glows removed — quantum nodes canvas handles all visual depth */ @keyframes qHeroGrid { from { background-position: 0 0, 0 0; } to { background-position: 120px 120px, 120px 120px; } } @keyframes qHeroGlow { 0%, 100% { transform: translateY(0); opacity: 0.1; } 50% { transform: translateY(-18px); opacity: 0.16; } } @keyframes proofSweep { 0%, 100% { transform: translateX(-60%); } 50% { transform: translateX(60%); } } .q-hero-orb { position: absolute; border-radius: 50%; filter: blur(110px); will-change: transform; } .q-hero-orb-1 { width: 1000px; height: 1000px; background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 35%, transparent 65%); top: -520px; right: -420px; animation: q-orb-drift 30s ease-in-out infinite; } .q-hero-orb-2 { width: 820px; height: 820px; background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 65%); bottom: -420px; left: -320px; animation: q-orb-drift 35s ease-in-out infinite reverse; } @keyframes q-orb-drift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-30px, 20px) rotate(2deg); } 50% { transform: translate(-50px, 40px) rotate(0deg); } 75% { transform: translate(-20px, 30px) rotate(-2deg); } } /* ============================================================================ MINI HERO (Page headers) ============================================================================ */ .q-page-header.q-hero-mini { position: relative; overflow: hidden; background: var(--gradient-hero-dark); color: var(--gc-white); padding: calc(var(--q-header-h) + var(--space-8)) 0 var(--space-12); --gc-text-primary: var(--gc-white); --gc-text-secondary: rgba(255, 255, 255, 0.78); --gc-text-muted: rgba(255, 255, 255, 0.65); --glass-bg: rgba(255, 255, 255, 0.05); --glass-bg-hover: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.12); } .q-page-header.q-hero-mini .q-container { position: relative; z-index: 3; } .q-page-header.q-hero-mini .q-h1 { color: var(--gc-white); } .q-page-header.q-hero-mini .q-hero-subtitle { color: rgba(255, 255, 255, 0.78); font-size: var(--text-lg); max-width: 680px; } .q-page-header.q-hero-mini .q-badge, .q-page-header.q-hero-mini .q-badge-primary, .q-page-header.q-hero-mini .q-badge-new { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.9); } .q-page-header.q-hero-mini .q-badge-dot { background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 10px rgba(255, 255, 255, 0.35); animation: none; } .q-page-header.q-hero-mini .q-gradient-text { color: var(--gc-white); background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.75) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .q-page-header.q-hero-mini .q-btn-primary, .q-cert-hero .q-btn-primary, .q-sector-hero .q-btn-primary { background: rgba(255, 255, 255, 0.95); color: var(--gc-slate-900); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); } .q-page-header.q-hero-mini .q-btn-primary:hover, .q-cert-hero .q-btn-primary:hover, .q-sector-hero .q-btn-primary:hover { background: var(--gc-white); color: var(--gc-slate-900); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4); } .q-page-header.q-hero-mini .q-btn-secondary, .q-cert-hero .q-btn-secondary, .q-sector-hero .q-btn-secondary, .q-sector-hero .q-btn-whatsapp { background: rgba(255, 255, 255, 0.08); color: var(--gc-white); border-color: rgba(255, 255, 255, 0.24); box-shadow: none; } .q-page-header.q-hero-mini .q-btn-secondary:hover, .q-cert-hero .q-btn-secondary:hover, .q-sector-hero .q-btn-secondary:hover, .q-sector-hero .q-btn-whatsapp:hover { background: rgba(255, 255, 255, 0.18); color: var(--gc-white); } /* -- Hero-mini responsive ------------------------------------------------- */ @media (max-width: 768px) { .q-page-header.q-hero-mini { padding: calc(var(--q-header-h) + var(--space-6)) 0 var(--space-8); } .q-page-header.q-hero-mini .q-hero-subtitle { font-size: var(--text-base); } .q-page-header.q-hero-mini .q-h1 { font-size: var(--text-3xl); } } /* ============================================================================ SECTOR HERO (uses q-hero-bg) ============================================================================ */ .q-sector-hero { background: var(--gradient-hero-dark); color: var(--gc-white); --gc-text-primary: var(--gc-white); --gc-text-secondary: rgba(255, 255, 255, 0.78); --gc-text-muted: rgba(255, 255, 255, 0.65); --glass-bg: rgba(255, 255, 255, 0.05); --glass-bg-hover: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.12); } .q-sector-hero .q-container { position: relative; z-index: 2; } .q-sector-hero .q-h1 { color: var(--gc-white); } .q-sector-hero .q-stat-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); } .q-sector-hero .q-stat-value { color: var(--gc-white); } .q-sector-hero .q-stat-label { color: rgba(255, 255, 255, 0.75); } /* ============================================================================ PROOF BAR ============================================================================ */ .q-proof-bar { position: relative; padding: var(--space-4) 0; background: var(--gradient-hero-dark); border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--gc-white); } .q-proof-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%); transform: translateX(-60%); opacity: 0.25; animation: proofSweep 18s ease-in-out infinite; pointer-events: none; } .q-proof-content { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; } .q-proof-label { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); } .q-proof-logos { display: flex; align-items: center; gap: var(--space-3); } .q-proof-logos img { opacity: 0.85; filter: grayscale(1) brightness(1.9); transition: opacity var(--transition-base), transform var(--transition-base); } .q-proof-logos img:hover { opacity: 1; transform: translateY(-1px); } .q-proof-text { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.75); } /* ============================================================================ SECTION BACKGROUNDS (ALT) ============================================================================ */ .q-section-alt { background: var(--gc-surface-muted); } /* ============================================================================ INTRO (Qué es...) ============================================================================ */ .q-intro-grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: var(--space-10); align-items: start; } .q-intro-content p { color: var(--gc-gray-700); line-height: 1.75; margin-top: var(--space-4); } .q-intro-stats { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } .q-intro-stat-card { padding: var(--space-6); background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-xl); box-shadow: var(--gc-shadow-card); } .q-intro-stat-value { display: block; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; color: var(--gc-gray-900); margin-bottom: var(--space-1); } .q-intro-stat-label { display: block; font-size: var(--text-sm); color: var(--gc-gray-600); } /* ============================================================================ GRIDS: Aspects / Hazards / Clauses ============================================================================ */ .q-aspects-grid, .q-hazards-grid, .q-clauses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); } .q-aspect-card, .q-hazard-card, .q-clause-card { padding: var(--space-8); background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-xl); box-shadow: var(--gc-shadow-card); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .q-aspect-card:hover, .q-hazard-card:hover { transform: translateY(-6px); box-shadow: var(--gc-shadow-float); border-color: var(--q-cert, rgba(var(--gc-primary-rgb), 0.35)); } .q-aspect-card h3, .q-hazard-card h3 { font-size: var(--text-lg); font-weight: 700; color: var(--gc-gray-900); margin-bottom: var(--space-3); } .q-aspect-pain, .q-aspect-solution, .q-hazard-sectors, .q-hazard-impact, .q-hazard-control { font-size: var(--text-sm); line-height: 1.6; } .q-aspect-pain { color: var(--gc-gray-600); margin: 0 0 var(--space-2); } .q-aspect-solution { color: var(--q-cert, var(--gc-primary)); margin: 0; } .q-hazard-sectors, .q-hazard-impact, .q-hazard-control { margin: 0 0 var(--space-1); } .q-hazard-sectors { color: var(--gc-gray-500); } .q-hazard-impact { color: var(--gc-primary); } .q-hazard-control { color: var(--q-cert, var(--gc-primary)); } .q-aspect-impact, .q-aspect-control, .q-hazard-examples { color: var(--gc-gray-700); font-size: var(--text-sm); line-height: 1.65; margin-top: var(--space-2); } .q-aspect-impact strong, .q-aspect-control strong, .q-hazard-examples strong { color: var(--gc-gray-900); } /* Clauses layout */ .q-clause-card { display: flex; gap: var(--space-4); align-items: flex-start; } .q-clause-num { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-xl); font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--gc-white); background: var(--gradient-living-red); box-shadow: 0 10px 25px rgba(var(--gc-primary-rgb), 0.25); flex-shrink: 0; } .q-clause-content h3 { font-size: var(--text-base); font-weight: 700; color: var(--gc-gray-900); margin-bottom: var(--space-1); } .q-clause-content p { color: var(--gc-gray-700); font-size: var(--text-sm); line-height: 1.65; } .q-structure-note { margin-top: var(--space-8); display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); background: rgba(10, 10, 10, 0.04); border: 1px solid rgba(10, 10, 10, 0.10); border-radius: var(--radius-xl); } .q-structure-note svg { color: var(--gc-primary); flex-shrink: 0; margin-top: 2px; } .q-structure-note p { margin: 0; color: var(--gc-gray-700); font-size: var(--text-sm); line-height: 1.7; } /* ============================================================================ INFOSEC: Threats / Domains (ISO 27001) ============================================================================ */ .q-threats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); } .q-threat-card { padding: var(--space-8); background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-xl); box-shadow: var(--gc-shadow-card); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .q-threat-card:hover { transform: translateY(-6px); box-shadow: var(--gc-shadow-float); border-color: var(--q-cert, rgba(var(--gc-primary-rgb), 0.35)); } .q-threat-card h3 { font-size: var(--text-lg); font-weight: 700; color: var(--gc-gray-900); margin-bottom: var(--space-2); } .q-threat-impact { font-size: var(--text-sm); color: var(--gc-gray-600); line-height: 1.6; margin: 0 0 var(--space-2); } .q-threat-trend { font-size: var(--text-sm); font-weight: 600; color: var(--q-cert, var(--gc-primary)); } .q-domains-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-6); } .q-domain-card { padding: var(--space-8); background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-xl); box-shadow: var(--gc-shadow-card); } .q-domain-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom-width: 2px; border-bottom-style: solid; border-color: color-mix(in srgb, var(--q-cert, var(--gc-primary)) 22%, var(--gc-slate-200)); } .q-domain-num { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--q-cert, var(--gc-primary)); } .q-domain-num-pill { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: var(--radius-full); background: var(--q-cert, var(--gc-primary)); color: var(--gc-white); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; } .q-domain-meta h3 { font-size: var(--text-lg); font-weight: 600; color: var(--gc-gray-900); } .q-domain-count { font-size: var(--text-sm); color: var(--gc-gray-500); } .q-domain-focus { display: inline-block; font-size: var(--text-sm); font-weight: 600; color: var(--q-cert, var(--gc-primary)); margin: 0 0 var(--space-2); } .q-domain-card p { font-size: var(--text-sm); color: var(--gc-gray-600); line-height: 1.6; margin: 0; } /* ============================================================================ LEGAL GRID (cards) ============================================================================ */ .q-legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } .q-legal-card { padding: var(--space-8); background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-xl); box-shadow: var(--gc-shadow-card); } .q-legal-header { margin-bottom: var(--space-3); } .q-legal-code { display: inline-flex; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; color: var(--q-cert, var(--gc-primary)); } .q-legal-header h3 { font-size: var(--text-lg); font-weight: 600; color: var(--gc-gray-900); margin: var(--space-1) 0 0; } .q-legal-card p { font-size: var(--text-sm); color: var(--gc-gray-600); line-height: 1.6; margin: 0; } @media (max-width: 768px) { .q-legal-grid { grid-template-columns: 1fr; } } /* ============================================================================ LEGAL TABLES ============================================================================ */ .q-legal-table-wrapper { overflow-x: auto; background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-xl); box-shadow: var(--gc-shadow-card); } .q-legal-table-wrapper table { width: 100%; border-collapse: collapse; min-width: 640px; } .q-legal-table-wrapper th, .q-legal-table-wrapper td { padding: var(--space-4) var(--space-5); text-align: left; border-bottom: 1px solid var(--gc-slate-200); font-size: var(--text-sm); } .q-legal-table-wrapper th { background: #f8fafc; color: var(--gc-gray-900); font-weight: 700; } .q-legal-table-wrapper td { color: var(--gc-gray-700); } .q-legal-table-wrapper tr:last-child td { border-bottom: none; } /* ============================================================================ BENEFITS ============================================================================ */ .q-benefits-grid, .q-benefits-grid-extended { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); } .q-benefit-card, .q-benefit-card-extended { padding: var(--space-8); background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-xl); box-shadow: var(--gc-shadow-card); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .q-benefit-card:hover, .q-benefit-card-extended:hover { transform: translateY(-6px); box-shadow: var(--gc-shadow-float); border-color: rgba(var(--gc-primary-rgb), 0.35); } .q-benefit-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); } .q-benefit-icon { width: 52px; height: 52px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; background: rgba(var(--gc-primary-rgb), 0.10); color: var(--gc-primary); flex-shrink: 0; } .q-benefit-stat { text-align: right; } .q-benefit-stat-value { display: block; font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--gc-gray-900); } .q-benefit-stat-label { display: block; font-size: var(--text-xs); color: var(--gc-gray-600); text-transform: uppercase; letter-spacing: 0.08em; } .q-benefit-card h3, .q-benefit-card-extended h3 { font-size: var(--text-lg); font-weight: 800; color: var(--gc-gray-900); margin-bottom: var(--space-3); } .q-benefit-card p, .q-benefit-card-extended p { color: var(--gc-gray-700); font-size: var(--text-sm); line-height: 1.7; } /* ============================================================================ SECTORS (Certificación) ============================================================================ */ .q-sectors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); } .q-sector-card-cert { padding: var(--space-8); background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-xl); box-shadow: var(--gc-shadow-card); } .q-sector-share { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; background: color-mix(in srgb, var(--q-cert, var(--gc-primary)) 10%, white); color: var(--q-cert, var(--gc-primary)); border: 1px solid color-mix(in srgb, var(--q-cert, var(--gc-primary)) 22%, var(--gc-slate-200)); margin-bottom: var(--space-4); } .q-sector-card-cert h3 { font-size: var(--text-lg); font-weight: 800; color: var(--gc-gray-900); margin-bottom: var(--space-2); } .q-sector-nace { font-size: var(--text-xs); color: var(--gc-gray-500); margin-bottom: var(--space-3); } .q-sector-reason { font-size: var(--text-sm); color: var(--gc-gray-700); line-height: 1.7; } .q-sector-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-xl); box-shadow: var(--gc-shadow-card); } .q-sector-item span { font-size: var(--text-sm); font-weight: 600; color: var(--gc-gray-800); } .q-sector-item svg { flex-shrink: 0; } /* ============================================================================ DOCUMENTS (ISO 9001) ============================================================================ */ .q-docs-table-wrapper { overflow-x: auto; background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-xl); box-shadow: var(--gc-shadow-card); } .q-docs-table { width: 100%; border-collapse: collapse; min-width: 680px; } .q-docs-table th, .q-docs-table td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--gc-slate-200); text-align: left; font-size: var(--text-sm); } .q-docs-table th { background: #f8fafc; color: var(--gc-gray-900); font-weight: 700; } .q-docs-table td { color: var(--gc-gray-700); } .q-docs-table tr:last-child td { border-bottom: none; } .q-docs-table code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(var(--gc-primary-rgb), 0.08); color: var(--gc-primary-dark); } .q-badge-small { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent; } .q-badge-required { background: rgba(var(--gc-primary-rgb), 0.10); color: var(--gc-primary); border-color: rgba(var(--gc-primary-rgb), 0.18); } .q-badge-optional { background: rgba(10, 10, 10, 0.05); color: var(--gc-gray-700); border-color: rgba(10, 10, 10, 0.10); } .q-docs-note { margin-top: var(--space-6); padding: var(--space-6); border-radius: var(--radius-xl); border: 1px solid rgba(var(--gc-primary-rgb), 0.18); background: rgba(var(--gc-primary-rgb), 0.06); color: var(--gc-gray-800); } /* ============================================================================ ELEMENTS (ISO 37001 / 22301 / 50001 / 13485) ============================================================================ */ .q-elements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); } .q-element-item { display: flex; gap: var(--space-4); padding: var(--space-8); background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-xl); box-shadow: var(--gc-shadow-card); } .q-element-number { width: 42px; height: 42px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: var(--gradient-living-red); color: var(--gc-white); font-weight: 800; flex-shrink: 0; box-shadow: 0 10px 25px rgba(var(--gc-primary-rgb), 0.25); } .q-element-text h3 { font-size: var(--text-base); font-weight: 800; color: var(--gc-gray-900); margin-bottom: var(--space-1); } .q-element-text p { color: var(--gc-gray-700); font-size: var(--text-sm); line-height: 1.7; } /* ============================================================================ PROCESS TIMELINE ============================================================================ */ .q-process-timeline { display: flex; flex-direction: column; gap: var(--space-6); } .q-process-step { display: flex; gap: var(--space-6); align-items: flex-start; padding: var(--space-8); background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-2xl); box-shadow: var(--gc-shadow-card); } .q-process-number { width: 54px; height: 54px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); color: var(--gc-white); background: linear-gradient(135deg, color-mix(in srgb, var(--q-cert, var(--gc-primary)) 88%, white), var(--q-cert-dark, var(--gc-primary-dark))); box-shadow: 0 12px 30px var(--q-cert-glow, rgba(var(--gc-primary-rgb), 0.25)); flex-shrink: 0; } .q-process-content h3 { font-size: var(--text-lg); font-weight: 800; color: var(--gc-gray-900); margin-bottom: var(--space-2); } .q-process-content p { color: var(--gc-gray-700); font-size: var(--text-sm); line-height: 1.7; } .q-process-time { display: inline-flex; margin-top: var(--space-4); padding: 6px 12px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.03em; background: color-mix(in srgb, var(--q-cert, var(--gc-primary)) 10%, white); color: var(--q-cert-dark, var(--gc-primary-dark)); border: 1px solid color-mix(in srgb, var(--q-cert, var(--gc-primary)) 24%, var(--gc-slate-200)); } /* ============================================================================ RELATED NORMS ============================================================================ */ .q-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); } .q-related-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-8); background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-xl); box-shadow: var(--gc-shadow-card); text-decoration: none; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .q-related-card:hover { transform: translateY(-6px); box-shadow: var(--gc-shadow-float); border-color: rgba(var(--gc-primary-rgb), 0.35); } .q-related-content { display: block; min-width: 0; } .q-related-code { font-family: var(--font-display); font-weight: 900; color: var(--gc-primary); background: rgba(var(--gc-primary-rgb), 0.10); border: 1px solid rgba(var(--gc-primary-rgb), 0.18); padding: 6px 10px; border-radius: var(--radius-full); } .q-related-content h3 { margin: 0; font-size: var(--text-base); font-weight: 900; color: var(--gc-gray-900); } .q-related-name { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--gc-gray-700); } .q-related-synergy { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--gc-gray-600); } .q-related-card>svg { color: var(--gc-gray-500); transition: transform var(--transition-base), color var(--transition-base); } .q-related-card:hover>svg { transform: translateX(3px); color: var(--q-cert, var(--gc-primary)); } .q-related-cta { margin-top: var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--q-cert, var(--gc-primary)) 22%, var(--gc-slate-200)); background: color-mix(in srgb, var(--q-cert, var(--gc-primary)) 8%, white); } .q-related-cta p { margin: 0; color: var(--gc-gray-800); line-height: 1.7; } /* Shield Visual */ .q-cert-hero-visual { display: flex; align-items: center; justify-content: center; } .q-cert-shield { position: relative; width: 300px; height: 300px; } .q-shield-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--glass-border); } .q-shield-ring-1 { animation: q-ring-rotate 30s linear infinite; background: conic-gradient(from 0deg, var(--q-cert, var(--gc-primary)) 0%, transparent 30%, transparent 70%, color-mix(in srgb, var(--q-cert, var(--gc-primary)) 30%, white) 100%); -webkit-mask: radial-gradient(transparent 45%, black 46%, black 54%, transparent 55%); mask: radial-gradient(transparent 45%, black 46%, black 54%, transparent 55%); } .q-shield-ring-2 { inset: 30px; animation: q-ring-rotate 25s linear infinite reverse; background: conic-gradient(from 180deg, color-mix(in srgb, var(--q-cert, var(--gc-primary)) 30%, white) 0%, transparent 30%, transparent 70%, var(--q-cert, var(--gc-primary)) 100%); -webkit-mask: radial-gradient(transparent 40%, black 41%, black 59%, transparent 60%); mask: radial-gradient(transparent 40%, black 41%, black 59%, transparent 60%); } .q-shield-center { position: absolute; inset: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: 50%; box-shadow: 0 20px 80px color-mix(in srgb, var(--q-cert, var(--gc-primary)) 20%, transparent); } .q-shield-code { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 800; background: linear-gradient(135deg, var(--q-white), var(--q-cert, var(--q-primary-light))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .q-shield-version { font-size: var(--text-lg); color: var(--q-gray-400); } @keyframes q-ring-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================================================ PRICING SECTION ============================================================================ */ .q-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-bottom: var(--space-8); } .q-pricing-card { position: relative; padding: var(--space-8); background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-2xl); text-align: center; transition: var(--transition-smooth); box-shadow: var(--gc-shadow-card); } .q-pricing-card:hover { transform: translateY(-8px); border-color: var(--q-cert, var(--q-primary)); } .q-pricing-featured { background: linear-gradient(135deg, color-mix(in srgb, var(--q-cert, var(--gc-primary)) 18%, white), color-mix(in srgb, var(--q-cert, var(--gc-primary)) 6%, white)); border-color: var(--q-cert, var(--q-primary)); transform: scale(1.05); } .q-pricing-featured:hover { transform: scale(1.05) translateY(-8px); } .q-pricing-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-1); color: var(--gc-gray-900); } .q-pricing-employees { font-size: var(--text-sm); color: var(--gc-gray-600); margin-bottom: var(--space-6); } .q-pricing-price { margin-bottom: var(--space-6); } .q-pricing-currency { font-size: var(--text-lg); color: var(--gc-gray-600); vertical-align: top; } .q-pricing-amount { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 800; background: linear-gradient(135deg, var(--q-cert, var(--gc-primary)), var(--q-cert-dark, var(--gc-primary-dark))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .q-pricing-period { display: block; font-size: var(--text-sm); color: var(--gc-gray-600); margin-top: var(--space-1); } .q-pricing-features { text-align: left; margin-bottom: var(--space-6); } .q-pricing-features li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--gc-gray-700); } .q-pricing-features li::before { content: '✓'; color: var(--q-success); font-weight: bold; } .q-pricing-note { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--gc-gray-600); } .q-pricing-note a { color: var(--q-cert, var(--q-primary-light)); text-decoration: underline; } /* ============================================================================ FAQ SECTION ============================================================================ */ .q-faq-list { max-width: 800px; margin: 0 auto; } .q-faq-item { border-bottom: 1px solid var(--gc-slate-200); } .q-faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--space-6) 0; font-size: var(--text-lg); font-weight: 500; text-align: left; color: var(--gc-gray-900); background: none; border: none; cursor: pointer; transition: var(--transition-base); } .q-faq-question:hover { color: var(--q-cert, var(--q-primary-light)); } .q-faq-question svg { flex-shrink: 0; transition: transform var(--transition-base); } .q-faq-open .q-faq-question svg { transform: rotate(180deg); } .q-faq-answer { display: none; padding-bottom: var(--space-6); } .q-faq-open .q-faq-answer { display: block; } .q-faq-answer p { color: var(--gc-gray-700); line-height: 1.75; } /* ============================================================================ CTA SECTION ============================================================================ */ .q-cta-box { padding: var(--space-16); background: linear-gradient(135deg, color-mix(in srgb, var(--q-cert, var(--gc-primary)) 18%, white), color-mix(in srgb, var(--q-cert, var(--gc-primary)) 6%, white)); border: 1px solid var(--q-cert, var(--q-primary)); border-radius: var(--radius-3xl); text-align: center; box-shadow: var(--gc-shadow-float); } .q-cta-content .q-badge { margin-bottom: var(--space-4); } .q-cta-content .q-h2 { margin-bottom: var(--space-4); color: var(--gc-gray-900); } .q-cta-content>p { font-size: var(--text-lg); color: var(--gc-gray-700); margin-bottom: var(--space-8); } .q-cta-buttons { display: flex; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-8); } .q-cta-trust { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--gc-gray-700); } /* ============================================================================ BREADCRUMB LIGHT ============================================================================ */ .q-breadcrumb-light ol { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--q-gray-400); margin-bottom: var(--space-6); } .q-breadcrumb-light li { display: inline-flex; align-items: center; gap: var(--space-2); } .q-breadcrumb-light span { opacity: 0.7; } .q-breadcrumb-light a:hover { color: var(--q-white); } /* ============================================================================ RESPONSIVE ============================================================================ */ @media (max-width: 1024px) { .q-cert-hero-content { grid-template-columns: 1fr; text-align: center; } .q-cert-hero-stats { justify-content: center; } .q-cert-stat { text-align: center; } .q-cert-hero-cta { justify-content: center; } .q-cert-hero-visual { display: none; } .q-pricing-grid { grid-template-columns: 1fr; } .q-pricing-featured { transform: none; } .q-pricing-featured:hover { transform: translateY(-8px); } .q-intro-grid { grid-template-columns: 1fr; gap: var(--space-8); } .q-intro-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .q-cert-hero-stats { flex-direction: column; gap: var(--space-4); } .q-cert-hero-cta { flex-direction: column; } .q-cta-buttons { flex-direction: column; } .q-cta-box { padding: var(--space-8); } .q-proof-content { justify-content: flex-start; } .q-intro-stats { grid-template-columns: 1fr; } .q-process-step { flex-direction: column; gap: var(--space-4); } .q-related-card { grid-template-columns: 1fr; gap: var(--space-3); } .q-related-card>svg { justify-self: start; } .q-related-cta { flex-direction: column; align-items: flex-start; } } /* ═══════════════════════════════════════════════════════════════════════════ V2 STYLES — HIGH-VALUE COPY COMPONENTS ═══════════════════════════════════════════════════════════════════════════ */ /* Hero Sub-headline & Reassurance */ .q-h1-sub { display: block; font-size: var(--text-2xl); font-weight: 500; color: var(--gc-gray-300); margin-top: var(--space-2); } .q-cert-hero-reassurance { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--gc-gray-400); display: flex; align-items: center; gap: var(--space-2); } /* Benefits Grid V2 — with stat badges */ .q-benefits-grid-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .q-benefit-card-v2 { position: relative; background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-xl); padding: var(--space-8); transition: all 0.3s var(--ease-smooth); box-shadow: var(--gc-shadow-card); } .q-benefit-card-v2:hover { transform: translateY(-4px); box-shadow: var(--gc-shadow-float); border-color: var(--q-cert, var(--gc-primary)); } .q-benefit-stat-badge { position: absolute; top: var(--space-6); right: var(--space-6); text-align: right; } .q-benefit-stat-badge .q-stat-value { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--q-cert, var(--gc-primary)); line-height: 1; } .q-benefit-stat-badge .q-stat-label { display: block; font-size: var(--text-xs); color: var(--gc-gray-500); margin-top: 2px; } .q-benefit-card-v2 h3 { font-size: var(--text-lg); font-weight: 700; color: var(--gc-gray-900); margin-bottom: var(--space-2); padding-right: 80px; /* space for stat badge */ } .q-benefit-hook { font-size: var(--text-base); font-weight: 600; color: var(--gc-gray-700); margin-bottom: var(--space-3); line-height: 1.4; } .q-benefit-body { font-size: var(--text-sm); color: var(--gc-gray-600); line-height: 1.7; } /* Sectors Grid V2 — with hooks */ .q-sectors-grid-v2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } .q-sector-card-v2 { background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-lg); padding: var(--space-6); transition: all 0.3s var(--ease-smooth); box-shadow: var(--gc-shadow-card); } .q-sector-card-v2:hover { border-color: var(--q-cert, var(--gc-primary)); box-shadow: var(--gc-shadow-float); } .q-sector-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .q-sector-card-v2 .q-sector-share { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--q-cert, var(--gc-primary)); } .q-sector-card-v2 h3 { font-size: var(--text-base); font-weight: 600; color: var(--gc-gray-900); } .q-sector-hook { font-size: var(--text-sm); font-weight: 600; color: var(--gc-gray-800); margin-bottom: var(--space-2); line-height: 1.4; } .q-sector-detail { font-size: var(--text-xs); color: var(--gc-gray-500); line-height: 1.6; } /* Clauses Grid V2 — with focus labels */ .q-clauses-grid-v2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .q-clause-card-v2 { display: flex; gap: var(--space-4); background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-lg); padding: var(--space-5); transition: all 0.3s var(--ease-smooth); box-shadow: var(--gc-shadow-card); } .q-clause-card-v2:hover { border-color: var(--q-cert, var(--gc-primary)); transform: translateY(-2px); box-shadow: var(--gc-shadow-float); } .q-clause-card-v2:nth-child(7) { grid-column: 2 / 4; } .q-clause-card-v2 .q-clause-num { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--gc-gray-100); border-radius: var(--radius-md); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; color: var(--q-cert, var(--gc-primary)); } .q-clause-focus { display: inline-block; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--q-cert, var(--gc-primary)); margin-bottom: 4px; } .q-clause-card-v2 h3 { font-size: var(--text-base); font-weight: 700; color: var(--gc-gray-900); margin-bottom: var(--space-1); } .q-clause-card-v2 p { font-size: var(--text-sm); color: var(--gc-gray-600); line-height: 1.5; } /* Documents Grid */ .q-docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); } .q-doc-card { background: var(--gc-surface-elevated); border: 1px solid var(--gc-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--gc-shadow-card); } .q-doc-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); } .q-doc-header svg { color: var(--gc-primary); flex-shrink: 0; } .q-doc-header h4 { font-size: var(--text-sm); font-weight: 600; color: var(--gc-gray-900); } .q-doc-card p { font-size: var(--text-sm); color: var(--gc-gray-600); line-height: 1.5; } .q-docs-note { display: flex; gap: var(--space-3); padding: var(--space-5); background: color-mix(in srgb, var(--q-cert, var(--gc-primary)) 6%, white); border: 1px solid color-mix(in srgb, var(--q-cert, var(--gc-primary)) 22%, var(--gc-slate-200)); border-radius: var(--radius-lg); } .q-docs-note svg { flex-shrink: 0; color: var(--q-cert, var(--gc-primary)); margin-top: 2px; } .q-docs-note p { font-size: var(--text-sm); color: var(--gc-gray-700); line-height: 1.6; } /* Process Timeline V2 */ .q-process-timeline-v2 { max-width: 720px; margin: 0 auto; } .q-process-timeline-v2 .q-process-step { position: relative; display: flex; gap: var(--space-5); padding-bottom: var(--space-8); } .q-process-timeline-v2 .q-process-step:not(:last-child)::before { content: ''; position: absolute; left: 22px; top: 52px; width: 2px; height: calc(100% - 52px); background: var(--gc-gray-200); } .q-process-timeline-v2 .q-process-number { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--gc-gray-100); border-radius: 50%; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--q-cert, var(--gc-primary)); z-index: 1; } .q-process-step-final .q-process-number { background: var(--q-cert, var(--gc-primary)); color: var(--gc-white); } .q-process-timeline-v2 .q-process-content h3 { font-size: var(--text-lg); font-weight: 700; color: var(--gc-gray-900); margin-bottom: var(--space-2); } .q-process-timeline-v2 .q-process-content p { font-size: var(--text-base); color: var(--gc-gray-600); line-height: 1.6; margin-bottom: var(--space-2); } .q-process-timeline-v2 .q-process-time { font-size: var(--text-sm); color: var(--gc-gray-500); } /* Related Grid with pitch */ .q-related-pitch { font-size: var(--text-sm); color: var(--gc-gray-600); margin-top: var(--space-2); line-height: 1.5; } /* V2 Responsive */ @media (max-width: 1024px) { .q-benefits-grid-v2 { grid-template-columns: repeat(2, 1fr); } .q-sectors-grid-v2 { grid-template-columns: repeat(2, 1fr); } .q-clauses-grid-v2 { grid-template-columns: repeat(2, 1fr); } .q-clause-card-v2:nth-child(7) { grid-column: span 2; } .q-docs-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .q-h1-sub { font-size: var(--text-lg); } .q-benefits-grid-v2 { grid-template-columns: 1fr; } .q-benefit-card-v2 h3 { padding-right: 0; } .q-benefit-stat-badge { position: static; text-align: left; margin-bottom: var(--space-3); } .q-sectors-grid-v2 { grid-template-columns: 1fr; } .q-clauses-grid-v2 { grid-template-columns: 1fr; } .q-clause-card-v2:nth-child(7) { grid-column: span 1; } .q-docs-grid { grid-template-columns: 1fr; } .q-process-timeline-v2 .q-process-step { flex-direction: column; gap: var(--space-3); } .q-process-timeline-v2 .q-process-step:not(:last-child)::before { display: none; } }