/* Typography Scale - Desktop */
:root {
    /* Font Scale */
    --font-display: 3.4rem;      /* Hero titles */
    --font-h1: 3rem;             /* Section titles */
    --font-h2: 2.2rem;           /* Subsections */
    --font-h3: 1.8rem;           /* Card titles */
    --font-body-lg: 1.15rem;     /* Large body text */
    --font-body: 1.05rem;        /* Standard body */
    --font-body-sm: 0.95rem;     /* Small body */
    --font-small: 0.85rem;       /* Tags, captions */
    
    /* Line Heights */
    --lh-tight: 1.1;
    --lh-normal: 1.4;
    --lh-relaxed: 1.6;
    
    /* Letter Spacing */
    --ls-tight: -0.02em;
    --ls-normal: 0em;
    --ls-wide: 0.05em;
}

/* Mobile Typography Scale */
@media (max-width: 768px) {
    :root {
        --font-display: 2.4rem;    /* 70% of desktop */
        --font-h1: 2.1rem;         /* 70% of desktop */
        --font-h2: 1.6rem;         /* 72% of desktop */
        --font-h3: 1.4rem;         /* 78% of desktop */
        --font-body-lg: 1rem;      /* 90% of desktop */
        --font-body: 0.9rem;       /* 90% of desktop */
        --font-body-sm: 0.85rem;   /* 94% of desktop */
        --font-small: 0.75rem;     /* 94% of desktop */
    }
}

@media (max-width: 480px) {
    :root {
        --font-display: 2rem;      /* 59% of desktop */
        --font-h1: 1.8rem;         /* 60% of desktop */
        --font-h2: 1.4rem;         /* 64% of desktop */
        --font-h3: 1.2rem;         /* 67% of desktop */
        --font-body-lg: 0.95rem;   /* 86% of desktop */
        --font-body: 0.85rem;      /* 85% of desktop */
        --font-body-sm: 0.8rem;    /* 89% of desktop */
        --font-small: 0.7rem;      /* 88% of desktop */
    }
}

/* Extra small mobile devices - iPhone SE, etc. */
@media (max-width: 400px) {
    .pricing-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .service-panels {
        padding: 0 !important;
        gap: 1.2rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .service-panel-container {
        max-width: 300px;
        width: 300px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
    
    .service-panel {
        margin: 0 auto;
        width: 100%;
        max-width: 300px;
        padding: 1rem 0.8rem;
    }
}

/* iPhone 393px specific fix */
@media (max-width: 393px) {
    .service-panel-container {
        max-width: 280px !important;
        width: 280px !important;
    }
    
    .service-panel {
        max-width: 280px !important;
        padding: 0.9rem 0.7rem !important;
    }
}

@media (max-width: 360px) {
    :root {
        --font-display: 1.8rem;    /* 53% of desktop */
        --font-h1: 1.6rem;         /* 53% of desktop */
        --font-h2: 1.3rem;         /* 59% of desktop */
        --font-h3: 1.1rem;         /* 61% of desktop */
        --font-body-lg: 0.9rem;    /* 82% of desktop */
        --font-body: 0.8rem;       /* 80% of desktop */
        --font-body-sm: 0.75rem;   /* 83% of desktop */
        --font-small: 0.65rem;     /* 81% of desktop */
    }
    
    .service-panel-container {
        max-width: 260px !important;
        width: 260px !important;
    }
    
    .service-panel {
        max-width: 260px !important;
    }
}

/* APPLY TYPOGRAPHY SYSTEM */

/* Hero Title - Display */
@media (min-width: 769px) {
    .hero-title {
        font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
        font-weight: 300 !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
        margin-bottom: 2rem !important;
        color: #333 !important;
        text-transform: uppercase !important;
        text-align: left !important;
    }
}

/* Section Titles - H1 (All Same Size) */
.services-title,
.about-title,
.pricing-title,
.contact-title {
    font-size: var(--font-h1);
    font-weight: 300;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

/* Section-specific colors */
.services-title {
    color: #ffffff;
}

.about-title {
    color: #ffffff;
}

.pricing-title,
.contact-title {
    color: #333;
}

/* Modal Title - H2 */
.modal-title {
    font-size: var(--font-h2);
    font-weight: 300;
    line-height: var(--lh-normal);
    color: #F04037;
    margin-bottom: 1rem;
}

/* Plan Names - H3 */
.plan-name {
    font-size: var(--font-h3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin-bottom: 0.5rem;
}

/* Body Text - Large */
.hero-description,
.pricing-description {
    font-size: var(--font-body-lg);
    line-height: var(--lh-relaxed);
    color: #666;
    margin-bottom: 2rem;
}

/* Body Text - Standard */
.modal-subtitle,
.plan-subtitle,
.pricing-note,
.contact-method-link {
    font-size: var(--font-body);
    line-height: var(--lh-relaxed);
    color: #666;
}

/* About section text needs white color on dark background */
.about-intro,
.about-description,
.about-vision {
    font-size: var(--font-body);
    line-height: var(--lh-relaxed);
    color: #ffffff !important;
}

/* Services description needs white text on red background */
.services-description {
    font-size: var(--font-body);
    line-height: var(--lh-relaxed);
    color: #ffffff;
}

/* Body Text - Small */
.plan-features-list li,
.form-error {
    font-size: var(--font-body-sm);
    line-height: var(--lh-normal);
}

/* Small Text */
.tag,
.price-text,
.footer-info p {
    font-size: var(--font-small);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-wide);
}

/* Ensure price text is perfectly centered */
.price-text {
    text-align: center;
}

/* Button Text - Consistent */
.cta-button,
.cta-button-outline,
.contact-main-btn,
.modal-submit-btn {
    font-size: var(--font-body-sm);
    font-weight: 500;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

/* Navigation Links */
.nav-link {
    font-size: var(--font-body-sm);
    font-weight: 500;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

/* Form Text */
.form-group input,
.form-group textarea,
.form-group input::placeholder,
.form-group textarea::placeholder {
    font-size: var(--font-body);
    line-height: var(--lh-normal);
}

/* Price Amounts */
.price-amount {
    display: block;
    font-size: var(--font-h1);
    font-weight: 600;
    line-height: var(--lh-tight);
    text-align: center;
}

/* Special styling for long price text */
.pricing-plan.sistema .price-amount {
    font-size: var(--font-h3);
    line-height: var(--lh-normal);
    font-weight: 500;
    text-align: center;
}

/* About Tags */
.about-tags {
    font-size: var(--font-body);
    font-weight: 400;
    color: #ff4444;
}