/* =============================================
   GrysERP Landing Page — erp-landing.css
   Paleta: #2f89d9 | #1a6bbf | #f0f6fd
           #494d58 | #7c8996 | #1a2433
   ============================================= */

/* --- Reset & Base --- */
.grystech-erp * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.grystech-erp {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    color: #494d58;
    line-height: 1.6;
    overflow-x: hidden;
}

.grystech-erp a {
    text-decoration: none;
    color: inherit;
}

.grystech-erp ul {
    list-style: none;
}

.erp-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Variables via custom properties --- */
:root {
    --erp-primary:       #2f89d9;
    --erp-primary-dark:  #1a6bbf;
    --erp-primary-light: #f0f6fd;
    --erp-text:          #494d58;
    --erp-muted:         #7c8996;
    --erp-dark:          #1a2433;
    --erp-border:        #dce8f5;
    --erp-white:         #ffffff;
    --erp-radius:        12px;
    --erp-shadow:        0 4px 24px rgba(47,137,217,.12);
    --erp-transition:    .25s ease;
}

/* =============================================
   NAVBAR
   ============================================= */
.erp-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--erp-border);
    transition: box-shadow var(--erp-transition);
}

.erp-navbar.scrolled {
    box-shadow: 0 2px 20px rgba(47,137,217,.15);
}

.erp-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    gap: 24px;
}

.erp-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--erp-dark);
    flex-shrink: 0;
}

.erp-logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--erp-primary), var(--erp-primary-dark));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: .9rem;
    font-weight: 800;
}

.erp-logo span {
    color: var(--erp-primary);
}

.erp-nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.erp-nav-links a {
    font-size: .92rem;
    font-weight: 500;
    color: var(--erp-text);
    transition: color var(--erp-transition);
    white-space: nowrap;
}

.erp-nav-links a:hover {
    color: var(--erp-primary);
}

.erp-nav-cta {
    background: var(--erp-primary);
    color: white !important;
    padding: 9px 22px;
    border-radius: 8px;
    font-weight: 600;
    transition: background var(--erp-transition), transform var(--erp-transition);
}

.erp-nav-cta:hover {
    background: var(--erp-primary-dark) !important;
    transform: translateY(-1px);
}

.erp-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
}

.erp-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--erp-text);
    border-radius: 2px;
    transition: all var(--erp-transition);
}

/* =============================================
   HERO
   ============================================= */
.erp-hero {
    padding: 140px 0 80px;
    background: linear-gradient(155deg, #ffffff 0%, var(--erp-primary-light) 60%, #dceef9 100%);
    position: relative;
    overflow: hidden;
}

.erp-hero::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -150px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(47,137,217,.1) 0%, transparent 70%);
    pointer-events: none;
}

.erp-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.erp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid var(--erp-border);
    color: var(--erp-primary);
    font-size: .82rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(47,137,217,.1);
}

.erp-hero-badge .flag { font-size: 1rem; }

.erp-hero h1 {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--erp-dark);
    line-height: 1.2;
    margin-bottom: 20px;
}

.erp-hero h1 .highlight {
    color: var(--erp-primary);
}

.erp-hero-subtitle {
    font-size: 1.05rem;
    color: var(--erp-muted);
    margin-bottom: 36px;
    max-width: 480px;
    line-height: 1.7;
}

.erp-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.erp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 10px;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: all var(--erp-transition);
    border: none;
    text-decoration: none;
}

.erp-btn-primary {
    background: var(--erp-primary);
    color: white;
    box-shadow: 0 4px 16px rgba(47,137,217,.35);
}

.erp-btn-primary:hover {
    background: var(--erp-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(47,137,217,.45);
}

.erp-btn-whatsapp {
    background: #25d366;
    color: white;
    box-shadow: 0 4px 16px rgba(37,211,102,.3);
}

.erp-btn-whatsapp:hover {
    background: #1ebe5d;
    transform: translateY(-2px);
}

.erp-btn-outline {
    background: transparent;
    color: var(--erp-primary);
    border: 2px solid var(--erp-primary);
}

.erp-btn-outline:hover {
    background: var(--erp-primary);
    color: white;
    transform: translateY(-2px);
}

/* Mock Browser */
.erp-hero-visual {
    position: relative;
}

.erp-mock-browser {
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(26,36,51,.18), 0 4px 16px rgba(47,137,217,.1);
    overflow: hidden;
    transform: perspective(1000px) rotateY(-6deg) rotateX(2deg);
    transition: transform .4s ease;
}

.erp-mock-browser:hover {
    transform: perspective(1000px) rotateY(-2deg) rotateX(0deg);
}

.erp-mock-bar {
    background: #f1f3f5;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e0e4e8;
}

.erp-mock-dots {
    display: flex;
    gap: 6px;
}

.erp-mock-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.erp-mock-dots span:nth-child(1) { background: #ff5f57; }
.erp-mock-dots span:nth-child(2) { background: #febc2e; }
.erp-mock-dots span:nth-child(3) { background: #28c840; }

.erp-mock-url {
    background: white;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: .75rem;
    color: var(--erp-muted);
    flex: 1;
    border: 1px solid #e0e4e8;
}

.erp-mock-screen {
    display: flex;
    height: 320px;
}

.erp-mock-sidebar {
    width: 60px;
    background: var(--erp-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    gap: 16px;
}

.erp-mock-sidebar-item {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,.1);
    border-radius: 8px;
}

.erp-mock-sidebar-item.active {
    background: var(--erp-primary);
}

.erp-mock-main {
    flex: 1;
    padding: 16px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.erp-mock-header-bar {
    height: 28px;
    background: white;
    border-radius: 6px;
    border: 1px solid var(--erp-border);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
}

.erp-mock-header-bar::before {
    content: '';
    width: 60px;
    height: 8px;
    background: var(--erp-border);
    border-radius: 4px;
}

.erp-mock-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.erp-mock-stat-card {
    background: white;
    border-radius: 8px;
    padding: 10px;
    border: 1px solid var(--erp-border);
}

.erp-mock-stat-card .label {
    height: 6px;
    background: var(--erp-border);
    border-radius: 3px;
    margin-bottom: 6px;
    width: 60%;
}

.erp-mock-stat-card .value {
    height: 12px;
    border-radius: 3px;
    width: 80%;
}

.erp-mock-stat-card:nth-child(1) .value { background: var(--erp-primary); }
.erp-mock-stat-card:nth-child(2) .value { background: #25d366; }
.erp-mock-stat-card:nth-child(3) .value { background: #f59e0b; }

.erp-mock-chart-area {
    flex: 1;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--erp-border);
    padding: 12px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    overflow: hidden;
}

.erp-mock-bar-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 100%;
}

.erp-mock-bar-item {
    flex: 1;
    border-radius: 4px 4px 0 0;
    opacity: .75;
}

.erp-mock-bar-item:nth-child(1) { height: 40%; background: var(--erp-primary); }
.erp-mock-bar-item:nth-child(2) { height: 65%; background: var(--erp-primary); }
.erp-mock-bar-item:nth-child(3) { height: 50%; background: var(--erp-primary); }
.erp-mock-bar-item:nth-child(4) { height: 80%; background: var(--erp-primary-dark); opacity: 1; }
.erp-mock-bar-item:nth-child(5) { height: 55%; background: var(--erp-primary); }
.erp-mock-bar-item:nth-child(6) { height: 70%; background: var(--erp-primary); }
.erp-mock-bar-item:nth-child(7) { height: 90%; background: var(--erp-primary-dark); opacity: 1; }

.erp-mock-table-area {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--erp-border);
    overflow: hidden;
}

.erp-mock-table-row {
    display: flex;
    align-items: center;
    padding: 7px 12px;
    gap: 8px;
    border-bottom: 1px solid #f0f4f8;
}

.erp-mock-table-row:last-child { border-bottom: none; }

.erp-mock-table-row .col {
    height: 7px;
    border-radius: 3px;
    background: var(--erp-border);
}

.erp-mock-table-row .col:nth-child(1) { flex: 2; }
.erp-mock-table-row .col:nth-child(2) { flex: 1; background: rgba(47,137,217,.2); }
.erp-mock-table-row .col:nth-child(3) { width: 50px; background: rgba(37,211,102,.3); border-radius: 10px; }

/* =============================================
   STATS BAR
   ============================================= */
.erp-stats-bar {
    background: var(--erp-dark);
    padding: 28px 0;
}

.erp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

.erp-stat-item {
    color: white;
}

.erp-stat-item .stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--erp-primary);
    display: block;
    line-height: 1;
    margin-bottom: 6px;
}

.erp-stat-item .stat-label {
    font-size: .85rem;
    color: rgba(255,255,255,.65);
    font-weight: 500;
}

/* =============================================
   SECTION COMMON
   ============================================= */
.erp-section {
    padding: 80px 0;
}

.erp-section-alt {
    background: var(--erp-primary-light);
}

.erp-section-dark {
    background: var(--erp-dark);
}

.erp-section-header {
    text-align: center;
    margin-bottom: 56px;
}

.erp-section-tag {
    display: inline-block;
    background: rgba(47,137,217,.12);
    color: var(--erp-primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 14px;
}

.erp-section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--erp-dark);
    line-height: 1.25;
    margin-bottom: 14px;
}

.erp-section-title .highlight { color: var(--erp-primary); }

.erp-section-subtitle {
    font-size: 1rem;
    color: var(--erp-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

.erp-section-dark .erp-section-title { color: white; }
.erp-section-dark .erp-section-subtitle { color: rgba(255,255,255,.6); }
.erp-section-dark .erp-section-tag {
    background: rgba(47,137,217,.25);
    color: #7ec5f5;
}

/* =============================================
   MODULES TABS
   ============================================= */
.erp-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 40px;
}

.erp-tab-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 100px;
    border: 2px solid var(--erp-border);
    background: white;
    color: var(--erp-muted);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--erp-transition);
}

.erp-tab-btn:hover {
    border-color: var(--erp-primary);
    color: var(--erp-primary);
}

.erp-tab-btn.active {
    background: var(--erp-primary);
    border-color: var(--erp-primary);
    color: white;
    box-shadow: 0 4px 14px rgba(47,137,217,.3);
}

.erp-tab-icon { font-size: 1rem; }

.erp-tab-panel {
    display: none;
}

.erp-tab-panel.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    animation: fadeInUp .3s ease;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.erp-tab-content h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--erp-dark);
    margin-bottom: 12px;
}

.erp-tab-content p {
    color: var(--erp-muted);
    margin-bottom: 24px;
    line-height: 1.7;
}

.erp-tab-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.erp-tab-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.erp-feature-check {
    width: 22px;
    height: 22px;
    background: rgba(47,137,217,.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    font-size: .7rem;
    color: var(--erp-primary);
    font-weight: 800;
}

.erp-tab-feature-item span {
    font-size: .92rem;
    color: var(--erp-text);
    line-height: 1.5;
}

/* Module screenshot placeholder */
.erp-module-visual {
    background: white;
    border-radius: 14px;
    box-shadow: var(--erp-shadow);
    overflow: hidden;
    border: 1px solid var(--erp-border);
}

.erp-module-visual .erp-mock-bar {
    background: #f1f3f5;
    padding: 8px 14px;
}

.erp-module-screen {
    padding: 16px;
    background: #f8fafc;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.erp-module-screen .row {
    display: flex;
    gap: 10px;
}

.erp-module-screen .card {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--erp-border);
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.erp-module-screen .card .bar {
    height: 8px;
    background: var(--erp-border);
    border-radius: 4px;
}

.erp-module-screen .card .bar.primary { background: rgba(47,137,217,.3); width: 60%; }
.erp-module-screen .card .bar.short { width: 40%; }
.erp-module-screen .card .bar.accent { background: rgba(37,211,102,.3); width: 50%; }
.erp-module-screen .card .bar.warn   { background: rgba(245,158,11,.3); width: 45%; }

.erp-module-screen .full-bar {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--erp-border);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.erp-module-screen .table-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.erp-module-screen .table-row .cell {
    height: 8px;
    border-radius: 4px;
    background: var(--erp-border);
}

.erp-module-screen .table-row .cell:nth-child(1) { flex: 3; }
.erp-module-screen .table-row .cell:nth-child(2) { flex: 1; background: rgba(47,137,217,.2); }
.erp-module-screen .table-row .cell:nth-child(3) { flex: 1; background: rgba(37,211,102,.25); }

/* =============================================
   DGII SECTION
   ============================================= */
.erp-dgii-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.erp-dgii-card {
    background: white;
    border-radius: var(--erp-radius);
    padding: 28px;
    border: 1px solid var(--erp-border);
    transition: all var(--erp-transition);
    position: relative;
    overflow: hidden;
}

.erp-dgii-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--erp-primary), var(--erp-primary-dark));
    opacity: 0;
    transition: opacity var(--erp-transition);
}

.erp-dgii-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--erp-shadow);
    border-color: var(--erp-primary);
}

.erp-dgii-card:hover::before { opacity: 1; }

.erp-dgii-icon {
    width: 48px;
    height: 48px;
    background: var(--erp-primary-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 16px;
}

.erp-dgii-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--erp-dark);
    margin-bottom: 8px;
}

.erp-dgii-card p {
    font-size: .88rem;
    color: var(--erp-muted);
    line-height: 1.6;
}

/* =============================================
   BENEFITS
   ============================================= */
.erp-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.erp-benefit-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--erp-radius);
    padding: 32px 28px;
    text-align: center;
    transition: all var(--erp-transition);
}

.erp-benefit-card:hover {
    background: rgba(255,255,255,.1);
    transform: translateY(-4px);
}

.erp-benefit-icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
    display: block;
}

.erp-benefit-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}

.erp-benefit-card p {
    font-size: .9rem;
    color: rgba(255,255,255,.6);
    line-height: 1.6;
}

/* =============================================
   SCREENSHOTS GALLERY
   ============================================= */
.erp-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.erp-gallery-item {
    background: white;
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow);
    overflow: hidden;
    border: 1px solid var(--erp-border);
    transition: transform var(--erp-transition);
}

.erp-gallery-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(47,137,217,.18);
}

.erp-gallery-item .erp-mock-bar {
    padding: 8px 14px;
    background: #f1f3f5;
}

.erp-gallery-screen {
    height: 180px;
    background: linear-gradient(135deg, var(--erp-primary-light), #dceef9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.erp-gallery-screen-inner {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--erp-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.erp-gallery-screen-inner .g-header {
    background: var(--erp-dark);
    height: 28px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 6px;
}

.erp-gallery-screen-inner .g-header span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
}

.erp-gallery-screen-inner .g-body {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.erp-gallery-screen-inner .g-row {
    height: 8px;
    background: var(--erp-border);
    border-radius: 4px;
}

.erp-gallery-screen-inner .g-row.primary { background: rgba(47,137,217,.25); width: 70%; }
.erp-gallery-screen-inner .g-row.short { width: 50%; }
.erp-gallery-screen-inner .g-row.accent { background: rgba(37,211,102,.25); width: 60%; }

.erp-gallery-label {
    padding: 14px 16px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--erp-text);
    text-align: center;
    border-top: 1px solid var(--erp-border);
}

/* =============================================
   CONTACT SECTION
   ============================================= */
.erp-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.erp-contact-info h3 {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--erp-dark);
    margin-bottom: 14px;
}

.erp-contact-info p {
    color: var(--erp-muted);
    margin-bottom: 32px;
    line-height: 1.7;
}

.erp-contact-methods {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.erp-contact-method {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--erp-primary-light);
    border-radius: var(--erp-radius);
    border: 1px solid var(--erp-border);
    transition: all var(--erp-transition);
    text-decoration: none;
    color: inherit;
}

.erp-contact-method:hover {
    border-color: var(--erp-primary);
    box-shadow: 0 4px 16px rgba(47,137,217,.12);
    transform: translateX(4px);
}

.erp-contact-method-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.erp-contact-method-icon.wa  { background: #dcfce7; }
.erp-contact-method-icon.mail { background: rgba(47,137,217,.12); }

.erp-contact-method-text strong {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: var(--erp-dark);
    margin-bottom: 2px;
}

.erp-contact-method-text span {
    font-size: .82rem;
    color: var(--erp-muted);
}

/* Form */
.erp-form {
    background: white;
    border-radius: 16px;
    padding: 36px;
    box-shadow: var(--erp-shadow);
    border: 1px solid var(--erp-border);
}

.erp-form h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--erp-dark);
    margin-bottom: 24px;
}

.erp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.erp-form-group {
    margin-bottom: 16px;
}

.erp-form-group label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--erp-text);
    margin-bottom: 6px;
}

.erp-form-group input,
.erp-form-group textarea,
.erp-form-group select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--erp-border);
    border-radius: 8px;
    font-size: .92rem;
    font-family: inherit;
    color: var(--erp-text);
    background: #fafcff;
    transition: border-color var(--erp-transition), box-shadow var(--erp-transition);
    outline: none;
}

.erp-form-group input:focus,
.erp-form-group textarea:focus,
.erp-form-group select:focus {
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 3px rgba(47,137,217,.12);
    background: white;
}

.erp-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.erp-form-submit {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    padding: 14px;
}

.erp-form-notice {
    font-size: .8rem;
    color: var(--erp-muted);
    text-align: center;
    margin-top: 12px;
}

.erp-form-success {
    display: none;
    text-align: center;
    padding: 24px;
    background: #f0fdf4;
    border-radius: 10px;
    border: 1px solid #86efac;
    color: #166534;
    font-weight: 600;
}

.erp-form-error {
    display: none;
    text-align: center;
    padding: 12px;
    background: #fef2f2;
    border-radius: 8px;
    border: 1px solid #fca5a5;
    color: #991b1b;
    font-size: .88rem;
    margin-bottom: 16px;
}

/* =============================================
   CTA BANNER
   ============================================= */
.erp-cta-banner {
    background: linear-gradient(135deg, var(--erp-primary), var(--erp-primary-dark));
    padding: 72px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.erp-cta-banner::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 300px; height: 300px;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
}

.erp-cta-banner::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 220px; height: 220px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
}

.erp-cta-banner h2 {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.erp-cta-banner p {
    color: rgba(255,255,255,.8);
    margin-bottom: 32px;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.erp-cta-banner-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.erp-btn-white {
    background: white;
    color: var(--erp-primary);
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}

.erp-btn-white:hover {
    background: var(--erp-primary-light);
    transform: translateY(-2px);
}

.erp-btn-outline-white {
    background: transparent;
    color: white;
    border: 2px solid rgba(255,255,255,.6);
}

.erp-btn-outline-white:hover {
    background: rgba(255,255,255,.1);
    border-color: white;
    transform: translateY(-2px);
}

/* =============================================
   FOOTER
   ============================================= */
.erp-footer {
    background: var(--erp-dark);
    padding: 56px 0 28px;
    color: rgba(255,255,255,.65);
}

.erp-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.erp-footer-brand .erp-logo {
    color: white;
    margin-bottom: 14px;
}

.erp-footer-brand p {
    font-size: .88rem;
    line-height: 1.7;
    color: rgba(255,255,255,.5);
    max-width: 280px;
}

.erp-footer-col h5 {
    color: white;
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.erp-footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.erp-footer-col ul li a {
    font-size: .85rem;
    color: rgba(255,255,255,.5);
    transition: color var(--erp-transition);
}

.erp-footer-col ul li a:hover {
    color: var(--erp-primary);
}

.erp-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .82rem;
    color: rgba(255,255,255,.35);
}

.erp-footer-bottom a {
    color: var(--erp-primary);
}

/* =============================================
   NOTIFICATION
   ============================================= */
.erp-notification {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    transform: translateY(100px);
    opacity: 0;
    transition: all .4s cubic-bezier(.34,1.56,.64,1);
    border-left: 4px solid #25d366;
    max-width: 320px;
}

.erp-notification.show {
    transform: translateY(0);
    opacity: 1;
}

.erp-notification-icon { font-size: 1.4rem; }

.erp-notification-text strong {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: var(--erp-dark);
}

.erp-notification-text span {
    font-size: .8rem;
    color: var(--erp-muted);
}

/* =============================================
   MOBILE NAV
   ============================================= */
.erp-mobile-nav {
    display: none;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid var(--erp-border);
    padding: 20px 24px;
    flex-direction: column;
    gap: 16px;
    z-index: 999;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

.erp-mobile-nav.open { display: flex; }

.erp-mobile-nav a {
    font-size: .95rem;
    font-weight: 500;
    color: var(--erp-text);
    padding: 8px 0;
    border-bottom: 1px solid var(--erp-border);
}

.erp-mobile-nav a:last-child { border-bottom: none; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
    .erp-hero h1 { font-size: 2.1rem; }
    .erp-tab-panel.active { gap: 36px; }
    .erp-contact-grid { gap: 36px; }
}

@media (max-width: 768px) {
    .erp-nav-links { display: none; }
    .erp-hamburger { display: flex; }

    .erp-hero { padding: 110px 0 60px; }
    .erp-hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .erp-hero h1 { font-size: 1.8rem; }
    .erp-mock-browser { transform: none; }

    .erp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

    .erp-section { padding: 56px 0; }
    .erp-section-title { font-size: 1.6rem; }

    .erp-tabs-nav { gap: 6px; }
    .erp-tab-btn { padding: 8px 14px; font-size: .82rem; }
    .erp-tab-panel.active { grid-template-columns: 1fr; gap: 28px; }

    .erp-dgii-grid { grid-template-columns: 1fr 1fr; }
    .erp-benefits-grid { grid-template-columns: 1fr; }
    .erp-gallery-grid { grid-template-columns: 1fr 1fr; }
    .erp-contact-grid { grid-template-columns: 1fr; gap: 36px; }

    .erp-form-row { grid-template-columns: 1fr; }
    .erp-form { padding: 24px; }

    .erp-cta-banner h2 { font-size: 1.5rem; }

    .erp-footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .erp-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

@media (max-width: 480px) {
    .erp-dgii-grid { grid-template-columns: 1fr; }
    .erp-gallery-grid { grid-template-columns: 1fr; }
    .erp-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .erp-hero-actions { flex-direction: column; }
    .erp-hero-actions .erp-btn { justify-content: center; }
}

/* =============================================
   OVERRIDES — Neutraliza interferencia de Astra
   ============================================= */

/* Fondo explícito — máxima especificidad para pisar Astra */
body .grystech-erp                    { background-color: #ffffff !important; }
body .grystech-erp .erp-section       { background-color: #ffffff !important; }
body .grystech-erp .erp-section-alt   { background-color: #f0f6fd !important; }
body .grystech-erp .erp-section-dark  { background-color: #1a2433 !important; }
body .grystech-erp #dgii              { background-color: #ffffff !important; }
body .grystech-erp #contacto          { background-color: #ffffff !important; }

/* Tag pill — fondo azul sólido + texto blanco: contrasta sobre cualquier fondo */
.grystech-erp .erp-section-tag        { color: #ffffff !important; background: #2f89d9 !important; }
.grystech-erp .erp-section-title      { color: #1a2433 !important; }
.grystech-erp .erp-section-subtitle   { color: #7c8996 !important; }

/* Sección DGII — cards sobre fondo blanco con buen contraste */
.grystech-erp .erp-dgii-card          { background: #ffffff !important; border: 1.5px solid #dce8f5 !important; }
.grystech-erp .erp-dgii-card h4       { color: #1a2433 !important; }
.grystech-erp .erp-dgii-card p        { color: #494d58 !important; }
.grystech-erp .erp-dgii-icon          { background: #f0f6fd !important; }

/* Sección Contacto */
.grystech-erp .erp-contact-info h3    { color: #1a2433 !important; }
.grystech-erp .erp-contact-info > p   { color: #494d58 !important; }

/* Tarjetas WhatsApp / Email — blancas con borde visible y sombra */
.grystech-erp .erp-contact-method {
    background: #ffffff !important;
    border: 1.5px solid #dce8f5 !important;
    box-shadow: 0 2px 10px rgba(47,137,217,.08) !important;
    opacity: 1 !important;
}
.grystech-erp .erp-contact-method:hover {
    border-color: #2f89d9 !important;
    box-shadow: 0 4px 18px rgba(47,137,217,.15) !important;
}
.grystech-erp .erp-contact-method-icon.wa   { background: #dcfce7 !important; }
.grystech-erp .erp-contact-method-icon.mail { background: #e8f3fc !important; }
.grystech-erp .erp-contact-method-text strong { color: #1a2433 !important; }
.grystech-erp .erp-contact-method-text span   { color: #494d58 !important; }

/* Formulario */
.grystech-erp .erp-form               { background: #ffffff !important; border: 1.5px solid #dce8f5 !important; }
.grystech-erp .erp-form h4            { color: #1a2433 !important; }
.grystech-erp .erp-form-group label   { color: #494d58 !important; }
.grystech-erp .erp-form-group input,
.grystech-erp .erp-form-group textarea,
.grystech-erp .erp-form-group select  { color: #494d58 !important; background: #ffffff !important; border-color: #dce8f5 !important; }
.grystech-erp .erp-form-notice        { color: #7c8996 !important; }

/* Sección Beneficios (fondo oscuro) */
.grystech-erp .erp-section-dark .erp-section-tag      { background: rgba(47,137,217,.35) !important; color: #ffffff !important; }
.grystech-erp .erp-section-dark .erp-section-title    { color: #ffffff !important; }
.grystech-erp .erp-section-dark .erp-section-subtitle { color: rgba(255,255,255,.65) !important; }
.grystech-erp .erp-benefit-card h4    { color: #ffffff !important; }
.grystech-erp .erp-benefit-card p     { color: rgba(255,255,255,.65) !important; }