/* =============================================================================
   lib/styles/pages/technology_page.css — Filtra-Core Technology Page
   ============================================================================= */

.tech-page { display: flex; flex-direction: column; min-height: 100vh; }
.tech-page__main { flex: 1 0 auto; outline: none; }

/* =============================================================================
   HERO HEADER
   ============================================================================= */
.tech-page__hero { padding-top: var(--space-3xl, 48px); padding-bottom: var(--space-3xl, 48px); }
.tech-page__hero-badge { margin-top: 24px; margin-bottom: 24px; }

.tech-page__hero-title {
    font-family: var(--font-heading, 'Inter', sans-serif);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #E2E8F0;
    margin: 0 0 24px;
    max-width: 720px;
}

.tech-page__hero-subtitle {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(226, 232, 240, 0.80);
    margin: 0 0 32px;
    max-width: 640px;
}

.tech-page__hero-trust-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

@media (max-width: 639px) { .tech-page__hero-title { font-size: 32px; } .tech-page__hero-subtitle { font-size: 16px; } }
@media (min-width: 640px) and (max-width: 1023px) { .tech-page__hero-title { font-size: 40px; } }

/* =============================================================================
   SHARED SECTION TYPOGRAPHY
   ============================================================================= */
.tech-page__section-title {
    font-family: var(--font-heading, 'Inter', sans-serif);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: var(--color-primary, #0A192F);
    margin: 0 0 16px;
    padding-top: 25px;
}

.tech-page__section-title--gold { color: var(--color-gold, #F59E0B); }
.tech-page__section-title--centered { text-align: center; }

.tech-page__section-subtitle { font-family: var(--font-sans, 'Inter', sans-serif); font-size: 16px; font-weight: 400; line-height: 1.6; color: #6B7280; margin: 0; max-width: 640px; }
.tech-page__section-subtitle--muted { color: rgba(226, 232, 240, 0.65); }
.tech-page__section-subtitle--centered { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }

.tech-page__section-header { margin-bottom: 48px; }
.tech-page__section-body { font-family: var(--font-sans, 'Inter', sans-serif); font-size: 16px; font-weight: 400; line-height: 1.6; color: #1F2937; margin: 0 0 16px; max-width: 600px; }

@media (max-width: 639px) { .tech-page__section-title { font-size: 28px; padding-top: 30px; } }
@media (min-width: 640px) and (max-width: 1023px) { .tech-page__section-title { font-size: 32px; } }

/* =============================================================================
   SECTIONS
   ============================================================================= */
.tech-page__feature-list { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; margin-bottom: 32px; }
.tech-page__iot-content { display: flex; flex-direction: column; padding: 64px 0; }
.tech-page__safety-content { display: flex; flex-direction: column; }
.tech-page__quality { width: 100%; }
.tech-page__peso { width: 100%; }
.tech-page__env-content { display: flex; flex-direction: column; }

/* Stats row */
.tech-page__env-stats { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 32px; margin-top: 32px; }
.tech-page__env-stat { display: flex; flex-direction: column; gap: 4px; }

.tech-page__env-stat-value {
    font-family: var(--font-heading, 'Inter', sans-serif);
    font-size: 36px;
    font-weight: 700;
    color: var(--color-gold, #F59E0B);
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.tech-page__env-stat-label { font-family: var(--font-sans, 'Inter', sans-serif); font-size: 14px; font-weight: 500; color: #6B7280; line-height: 1.4; }

@media (max-width: 639px) { .tech-page__env-stats { gap: 24px; } .tech-page__env-stat-value { font-size: 28px; } }

/* =============================================================================
   ICON VISUAL PANELS
   ============================================================================= */
.tech-page__visual-panel { display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.tech-page__visual-ring { position: relative; width: 280px; height: 280px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.tech-page__visual-ring--cyan { background-color: rgba(0, 180, 216, 0.08); border: 2px solid rgba(0, 180, 216, 0.20); }
.tech-page__visual-ring--gold { background-color: rgba(245, 158, 11, 0.08); border: 2px solid rgba(245, 158, 11, 0.20); }
.tech-page__visual-ring--green { background-color: rgba(16, 185, 129, 0.08); border: 2px solid rgba(16, 185, 129, 0.20); }

.tech-page__visual-icon-primary { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.tech-page__visual-icon-primary--cyan { background-color: rgba(0, 180, 216, 0.15); color: var(--color-accent, #00B4D8); }
.tech-page__visual-icon-primary--gold { background-color: rgba(245, 158, 11, 0.15); color: var(--color-gold, #F59E0B); }
.tech-page__visual-icon-primary--green { background-color: rgba(16, 185, 129, 0.15); color: #10B981; }

.tech-page__visual-badge { position: absolute; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.tech-page__visual-badge--top-right { top: 20px; right: 20px; }
.tech-page__visual-badge--top-left { top: 20px; left: 20px; }
.tech-page__visual-badge--bottom-right { bottom: 20px; right: 20px; }
.tech-page__visual-badge--bottom-left { bottom: 20px; left: 20px; }

.tech-page__visual-badge--gold { background-color: rgba(245, 158, 11, 0.15); color: var(--color-gold, #F59E0B); border: 1px solid rgba(245, 158, 11, 0.30); }
.tech-page__visual-badge--navy { background-color: rgba(10, 25, 47, 0.12); color: var(--color-primary, #0A192F); border: 1px solid rgba(10, 25, 47, 0.20); }
.tech-page__visual-badge--cyan { background-color: rgba(0, 180, 216, 0.15); color: var(--color-accent, #00B4D8); border: 1px solid rgba(0, 180, 216, 0.30); }
.tech-page__visual-badge--success { background-color: rgba(16, 185, 129, 0.15); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.30); }

@media (max-width: 1023px) { .tech-page__visual-panel { display: none; } }
@media (max-width: 633px) { .tech-page__iot-content { padding: 30px 0; } }