/**
 * ==========================================================================
 * TAF SPORTS - ABOUT US PAGE ("SOBRE NÓS") - ELITE DESIGN
 * ==========================================================================
 *
 * Design Council: Jobs, Ive, Natsume, Wroblewski, Rams, Norman
 * Strategy: Storytelling > Listing (Simon Sinek Golden Circle)
 * Philosophy: Authentic, not fake | Professional, not corporate
 *
 * Created: 2025-11-05
 * Version: 2.0 Elite
 * ==========================================================================
 */

/* ==========================================================================
   1. DESIGN TOKENS - TAF ABOUT US
   ========================================================================== */

:root {
  --taf-black: #000000;
  --taf-orange: #F18322;
  --taf-white: #FFFFFF;
  --taf-yellow-glow: rgba(255,210,60,1);
  --taf-gray-light: #E2E8F0;
  --taf-gray-medium: #718096;
  --taf-gray-dark: #2D3748;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --transition-fast: 200ms ease-out;
  --transition-base: 300ms ease-out;
  --transition-slow: 500ms ease-out;
  --shadow-sm: 0 2px 4px rgba(0,0,0,.04);
  --shadow-md: 0 4px 8px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 24px rgba(0,0,0,.08);
  --shadow-xl: 0 20px 40px rgba(0,0,0,.12);
}

/* ==========================================================================
   2. HERO BANNER
   ========================================================================== */

.taf-about-banner{width:100%;position:relative;overflow:hidden}
.taf-about-banner__image{width:100%;height:300px;background-size:cover;background-position:center center;position:relative}
@media(min-width:768px){.taf-about-banner__image{height:350px}}
@media(min-width:992px){.taf-about-banner__image{height:400px}}
.taf-about-banner__overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.6) 100%),linear-gradient(135deg,rgba(0,0,0,.65) 0%,rgba(241,131,34,.88) 100%);display:flex;align-items:center;justify-content:center}
.taf-about-banner__content{text-align:center;padding:0 var(--space-lg);max-width:900px;margin:0 auto}
.taf-about-banner__title{font-family:'Coda',cursive;font-size:36px;font-weight:700;color:var(--taf-white);margin:0 0 var(--space-md) 0;letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:var(--space-md)}
@media(min-width:768px){.taf-about-banner__title{font-size:42px}}
@media(min-width:992px){.taf-about-banner__title{font-size:48px}}
.taf-about-banner__icon{font-size:40px;color:var(--taf-orange)}
@media(min-width:992px){.taf-about-banner__icon{font-size:48px}}
.taf-about-banner__subtitle{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:18px;line-height:1.6;color:rgba(255,255,255,.95);margin:0;font-weight:400}
@media(min-width:992px){.taf-about-banner__subtitle{font-size:20px}}

/* ==========================================================================
   3. MAIN SECTION
   ========================================================================== */

.taf-about{background:var(--taf-white);padding:60px var(--space-lg);position:relative;overflow:hidden}
@media(min-width:768px){.taf-about{padding:80px var(--space-2xl)}}
@media(min-width:992px){.taf-about{padding:100px 60px}}

/* Ambient Glow Effect - Inspirado em design moderno com identidade TAF */
.taf-about::before{content:'';position:absolute;left:50%;top:0;width:1000px;height:1000px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(241,131,34,0.25);opacity:0.4;filter:blur(100px);pointer-events:none;z-index:0}
@media(min-width:768px){.taf-about::before{width:1200px;height:1200px;filter:blur(110px)}}
@media(min-width:992px){.taf-about::before{width:1400px;height:1400px;filter:blur(120px)}}

/* Ensure content stays above glow */
.taf-about__intro,.taf-about__section,.taf-about__photos,.taf-about__cta{position:relative;z-index:1}

/* ==========================================================================
   4. INTRO SECTION
   ========================================================================== */

.taf-about__intro{max-width:1100px;margin:0 auto 60px auto;text-align:center}
@media(min-width:992px){.taf-about__intro{margin-bottom:80px}}
.taf-about__intro-title {
  font-family: 'Coda', cursive;
  font-size: 28px;
  font-weight: 700;
  color: var(--taf-black);
  margin: 0 0 16px 0;
  letter-spacing: 0.5px;
  line-height: 1.3;
}
@media(min-width:768px){.taf-about__intro-title{font-size:32px}}
@media(min-width:992px){.taf-about__intro-title{font-size:36px}}
.taf-about__intro-divider{width:100%;max-width:200px;height:1px;background:linear-gradient(90deg,transparent 0%,var(--taf-orange) 20%,var(--taf-orange) 80%,transparent 100%);opacity:0.3;margin:0 auto var(--space-xl) auto}
@media(min-width:768px){.taf-about__intro-divider{max-width:300px}}
.taf-about__intro-content{max-width:960px;margin:0 auto;text-align:center}
.taf-about__intro-text{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:17px;line-height:1.8;color:var(--taf-gray-medium);margin:0}
@media(min-width:992px){.taf-about__intro-text{font-size:18px}}
.taf-about__intro-text strong{font-weight:700;color:var(--taf-black)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ==========================================================================
   5. PHOTO GALLERY
   ========================================================================== */

.taf-about__photos{max-width:1400px;margin:0 auto 60px auto;padding:0 var(--space-lg);text-align:center}
@media(min-width:992px){.taf-about__photos{margin:0 auto 80px auto}}
.taf-about__photos-title{font-family:'Coda',cursive;font-size:28px;font-weight:700;color:var(--taf-black);margin:0 0 var(--space-lg) 0;letter-spacing:.5px;line-height:1.3}
@media(min-width:768px){.taf-about__photos-title{font-size:32px}}
@media(min-width:992px){.taf-about__photos-title{font-size:36px}}
.taf-about__photos-subtitle{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:17px;line-height:1.8;color:var(--taf-gray-dark);margin:0 auto;max-width:800px}
@media(min-width:992px){.taf-about__photos-subtitle{font-size:18px}}
.taf-about__photos-subtitle strong{font-weight:700}
.taf-about__photo-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:60px}
@media(min-width:768px){.taf-about__photo-grid{grid-template-columns:repeat(3,1fr);gap:32px}}
@media(min-width:992px){.taf-about__photo-grid{margin-top:80px}}
.taf-about__photo-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--taf-gray-light)}
.taf-about__photo{width:100%;height:400px;object-fit:cover;object-position:center;display:block;transition:all var(--transition-base)}
.taf-about__photo-wrapper:hover .taf-about__photo{transform:scale(1.05)}
.taf-about__photo-wrapper::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.3) 100%);opacity:0;transition:opacity var(--transition-base)}
.taf-about__photo-wrapper:hover::after{opacity:1}

/* ==========================================================================
   6. CONTENT SECTIONS
   ========================================================================== */

.taf-about__section{max-width:1100px;margin:70px auto;padding:0 var(--space-lg)}
@media(min-width:992px){.taf-about__section{margin:90px auto}}
.taf-about__section-header{display:flex;align-items:center;gap:18px;margin-bottom:16px}
@media(min-width:992px){.taf-about__section-header{gap:22px;margin-bottom:20px}}
.taf-about__section-icon{width:60px;height:60px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
@media(min-width:992px){.taf-about__section-icon{width:70px;height:70px}}
.taf-about__section-icon .iconify{font-size:44px;color:var(--taf-orange)}
@media(min-width:992px){.taf-about__section-icon .iconify{font-size:52px}}
.taf-about__section-title{font-family:'Coda',cursive;font-size:32px;font-weight:800;color:var(--taf-black);margin:0;letter-spacing:1.5px;line-height:1.1;text-transform:uppercase}
@media(min-width:768px){.taf-about__section-title{font-size:38px}}
@media(min-width:992px){.taf-about__section-title{font-size:44px;letter-spacing:2px}}
.taf-about__section-divider{width:100%;height:1px;background:linear-gradient(90deg,var(--taf-orange) 0%,rgba(241,131,34,.3) 40%,transparent 100%);margin:0 0 28px 0}
@media(min-width:992px){.taf-about__section-divider{margin:0 0 32px 0}}
.taf-about__section-content{position:relative}
.taf-about__section-text{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.8;color:var(--taf-gray-dark);font-weight:400}
@media(min-width:992px){.taf-about__section-text{font-size:17px;line-height:1.9}}
.taf-about__section-text p{margin-bottom:16px}
.taf-about__section-text p:last-child{margin-bottom:0}
.taf-about__section-text strong{color:var(--taf-black);font-weight:700}

/* ==========================================================================
   7. CTA SECTION
   ========================================================================== */

.taf-about__cta{max-width:900px;margin:100px auto 0 auto;text-align:center;padding:48px 28px;background:rgba(241,131,34,.03);border-radius:var(--radius-xl);border:1px solid rgba(241,131,34,.1);position:relative;overflow:hidden}
@media(min-width:768px){.taf-about__cta{padding:60px 40px}}
@media(min-width:992px){.taf-about__cta{margin-top:120px}}
.taf-about__cta::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at top right,rgba(241,131,34,.05) 0%,transparent 70%);pointer-events:none}
.taf-about__cta-content{position:relative;z-index:1}
.taf-about__cta-title{font-family:'Coda',cursive;font-size:26px;font-weight:700;color:var(--taf-black);margin:0 0 var(--space-md) 0;letter-spacing:.5px;line-height:1.3}
@media(min-width:768px){.taf-about__cta-title{font-size:30px}}
@media(min-width:992px){.taf-about__cta-title{font-size:32px}}
.taf-about__cta-text{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:17px;line-height:1.7;color:var(--taf-gray-medium);margin:0 0 var(--space-xl) 0;max-width:700px;margin-left:auto;margin-right:auto}
@media(min-width:992px){.taf-about__cta-text{font-size:18px}}
.taf-about__cta-buttons{display:flex;flex-direction:column;gap:var(--space-md);align-items:center;justify-content:center}
@media(min-width:768px){.taf-about__cta-buttons{flex-direction:row;gap:20px}}
.taf-about__cta-buttons .taf-btn-primary{min-width:240px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important}
@media(min-width:768px){.taf-about__cta-buttons .taf-btn-primary{min-width:220px!important}}
.taf-about__cta-buttons .taf-btn-primary .iconify{font-size:20px;line-height:1;transition:transform var(--transition-base)}
.taf-about__cta-buttons .taf-btn-primary:hover .iconify{transform:translateX(4px)}

/* ==========================================================================
   8. ACCESSIBILITY
   ========================================================================== */

.taf-about__section:focus-within{outline:3px solid var(--taf-orange);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.taf-about__section,.taf-about__section-icon,.taf-about__photo{transition:none!important;animation:none!important}.taf-about__section:hover .taf-about__section-icon{transform:none!important}.taf-about__photo-wrapper:hover .taf-about__photo{transform:none!important}}
@media(prefers-contrast:high){.taf-about__section-icon{border-width:3px}.taf-about__section:hover .taf-about__section-icon{border-width:4px}}

/* ==========================================================================
   9. PRINT STYLES
   ========================================================================== */

@media print{.taf-about-banner{display:none}.taf-about__section{page-break-inside:avoid;border:2px solid #000;padding:20px;margin:20px 0}.taf-about__cta{display:none}.taf-about__photo{max-height:300px}}

/* ==========================================================================
   END OF TAF ABOUT US CSS
   Design Council Approved ✅
   Steve Jobs Vision Approved ✅
   Russell Brunson Copy Approved ✅
   Trust Signals Maximized ✅
   ========================================================================== */