/* =========================================================
   Instituto Sonho Vivo — Style Sheet v3
   Design: Moderno, Ousado, Impactante
   ========================================================= */

@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img { max-width: 100%; height: auto; display: block; }
  ul, ol { list-style: none; }
  a { text-decoration: none; color: inherit; }
  button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
}

@layer base {
  :root {
    /* Paleta Impactante */
    --color-primary: #0a1a2f;
    --color-primary-dark: #060f1e;
    --color-primary-light: #1a3a5c;
    --color-primary-gradient: linear-gradient(160deg, #0a1a2f, #0d2847, #122d4a);

    /* Vibrant Accent */
    --color-accent: #ff4d00;
    --color-accent-dark: #cc3d00;
    --color-accent-light: #ff6b3d;
    --color-accent-gradient: linear-gradient(135deg, #cc3d00, #ff4d00, #ff6b3d);

    /* Coral complementar */
    --color-coral: #ff6b6b;
    --color-coral-dark: #e05555;
    --color-coral-gradient: linear-gradient(135deg, #e05555, #ff6b6b, #ff8e8e);

    /* Light Mode */
    --color-bg: #f5f0eb;
    --color-bg-alt: #ebe3d9;
    --color-bg-card: #fdfcfb;
    --color-bg-dark: #0a1a2f;
    --color-text: #1a1410;
    --color-text-secondary: #6b5d4e;
    --color-text-light: #ffffff;
    --color-border: rgba(0, 0, 0, 0.06);

    /* Glass */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-small: 0.875rem;
    --font-size-body: 1rem;
    --font-size-body-lg: 1.125rem;
    --font-size-heading: 1.5rem;
    --font-size-heading-lg: 2.5rem;
    --font-size-display: 3.5rem;
    --font-size-hero: 5rem;
    --font-size-hero-mobile: 2.8rem;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;

    --container-max: 1200px;
    --header-height: 4.5rem;
    --border-radius-sm: 0.5rem;
    --border-radius: 0.75rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.5rem;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 30px rgba(255, 77, 0, 0.15);

    --transition: 0.3s ease;
    --transition-slow: 0.6s ease;
  }

  [data-theme="dark"] {
    --color-bg: #060d17;
    --color-bg-alt: #0a1422;
    --color-bg-card: #0f1d30;
    --color-bg-dark: #060d17;
    --color-text: #e8e4de;
    --color-text-secondary: #8f8678;
    --color-text-light: #ffffff;
    --color-border: rgba(255, 255, 255, 0.06);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7);
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.06);
  }

  html { scroll-behavior: smooth; font-size: 100%; }
  body {
    font-family: var(--font-primary);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    min-height: 100vh;
    display: flex; flex-direction: column;
    transition: background 0.4s ease, color 0.4s ease;
    padding-left: 260px;
  }
  @media (max-width: 767.98px) { body { padding-left: 0; } }
  main { flex: 1; }
  main:focus { outline: none; }

  h1, h2, h3 { font-weight: 800; line-height: 1.1; color: var(--color-text); }
  h1 { font-size: var(--font-size-display); }
  h2 { font-size: var(--font-size-heading-lg); }
  h3 { font-size: var(--font-size-heading); }

  a { color: var(--color-accent); transition: color var(--transition); }
  a:hover { color: var(--color-accent-light); }

  :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
  section[id], article[id], [id] { scroll-margin-top: calc(var(--header-height) + var(--space-md)); }
  ::selection { background: var(--color-accent); color: white; }

  /* Scrollbar customizada */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: var(--color-bg); }
  ::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 4px; }
}

@layer components {
  .skip-link {
    position: absolute; top: -100%; left: var(--space-md); z-index: 10000;
    background: var(--color-text); color: var(--color-text-light);
    padding: var(--space-sm) var(--space-md);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    font-size: var(--font-size-small); font-weight: 500;
    transition: top var(--transition-fast);
  }
  .skip-link:focus { top: 0; }

  /* -------------------------------------------------------
     SIDEBAR VERTICAL
     ------------------------------------------------------- */
  .sidebar {
    position: fixed; top: 0; left: 0; width: 260px;
    height: 100vh; background: rgba(6, 13, 23, 0.98);
    backdrop-filter: blur(12px); color: var(--color-text-light);
    z-index: 1000; display: flex; flex-direction: column;
    transition: transform var(--transition);
    border-right: 1px solid rgba(255,255,255,0.04);
  }
  .sidebar__inner {
    display: flex; flex-direction: column;
    height: 100vh; padding: var(--space-lg) 0;
    overflow-y: auto;
  }
  .sidebar__logo {
    padding: 0 var(--space-lg) var(--space-xl);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: var(--space-lg);
  }
  .sidebar__logo img { height: 2rem; width: auto; }

  .sidebar__nav { flex: 1; padding: 0 var(--space-md); }
  .sidebar__nav-list { display: flex; flex-direction: column; gap: 2px; }
  .sidebar__nav-link {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 10px 14px; border-radius: 8px;
    color: rgba(255,255,255,0.6);
    font-size: var(--font-size-small); font-weight: 500;
    transition: all var(--transition-fast);
    letter-spacing: 0.3px;
  }
  .sidebar__nav-link:hover { color: var(--color-text-light); background: rgba(255,255,255,0.05); }
  .sidebar__nav-link--active,
  .sidebar__nav-link[aria-current="page"] { color: var(--color-accent); background: rgba(255,77,0,0.08); font-weight: 600; }

  .sidebar__divider { height: 1px; background: rgba(255,255,255,0.06); margin: var(--space-md) var(--space-lg); }

  .sidebar__bottom {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .sidebar__theme-toggle {
    display: flex; align-items: center;
    padding: 8px 12px; border-radius: 8px;
    color: rgba(255,255,255,0.5); font-size: var(--font-size-small);
    transition: all var(--transition-fast);
    width: 100; cursor: pointer;
    background: none; border: none;
  }
  .sidebar__theme-toggle:hover { color: var(--color-text-light); background: rgba(255,255,255,0.05); }
  .sidebar__theme-toggle .icon-sun { display: none; }
  .sidebar__theme-toggle .icon-moon { display: block; }
  [data-theme="dark"] .sidebar__theme-toggle .icon-sun { display: block; }
  [data-theme="dark"] .sidebar__theme-toggle .icon-moon { display: none; }

  .sidebar__social { display: flex; gap: var(--space-sm); margin-top: var(--space-md); justify-content: center; }
  .sidebar__social a {
    color: rgba(255,255,255,0.3); padding: 6px; border-radius: 6px;
    transition: all var(--transition-fast); display: flex;
  }
  .sidebar__social a:hover { color: var(--color-accent); background: rgba(255,255,255,0.05); }

  /* Mobile sidebar toggle */
  .sidebar-toggle {
    display: none; position: fixed; top: var(--space-md); left: var(--space-md);
    z-index: 1001; width: 40px; height: 40px;
    background: var(--color-primary); color: white;
    border: none; border-radius: 8px; cursor: pointer;
    align-items: center; justify-content: center;
  }

  /* -------------------------------------------------------
     HERO — IMPACTANTE (full-screen com imagem)
     ------------------------------------------------------- */
  .hero.hero--home {
    position: relative; min-height: 100vh;
    display: flex; align-items: center;
    background: var(--color-primary-dark);
    overflow: hidden;
  }
  .hero.hero--home::before {
    content: ''; position: absolute; inset: 0;
    background-image: url('https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?w=1600&q=80');
    background-size: cover; background-position: center 40%;
    opacity: 0.6; filter: saturate(1.1);
  }
  .hero.hero--home::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(6,13,23,0.92) 0%, rgba(10,26,47,0.7) 40%, rgba(10,26,47,0.4) 100%);
  }
  .hero.hero--home .hero__inner {
    position: relative; z-index: 2; width: 100%;
    padding: var(--space-5xl) var(--space-md);
    display: grid; grid-template-columns: 1fr;
    gap: var(--space-3xl); align-items: center;
  }
  .hero.hero--home .hero__title {
    font-size: clamp(2.5rem, 6vw, var(--font-size-hero));
    color: var(--color-text-light); margin-bottom: var(--space-lg);
    text-shadow: 0 4px 30px rgba(0,0,0,0.4);
    font-weight: 900; line-height: 1.05;
    max-width: 800px;
  }
  .hero.hero--home .hero__title span {
    background: var(--color-accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .hero.hero--home .hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: rgba(255,255,255,0.7);
    margin-bottom: var(--space-2xl);
    font-weight: 400; line-height: 1.6;
    max-width: 560px;
  }
  .hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

  /* -------------------------------------------------------
     BOTÕES — Impactantes
     ------------------------------------------------------- */
  .btn {
    display: inline-flex; align-items: center; gap: var(--space-sm);
    padding: 16px 36px; border-radius: 4px;
    font-size: var(--font-size-body); font-weight: 700;
    transition: all var(--transition);
    text-decoration: none; cursor: pointer;
    text-transform: uppercase; letter-spacing: 1px;
    position: relative; overflow: hidden;
  }
  .btn--primary {
    background: var(--color-accent-gradient);
    color: var(--color-text-light);
    border: none;
  }
  .btn--primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); }
  .btn--outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.3);
    color: var(--color-text-light);
  }
  .btn--outline:hover { border-color: var(--color-text-light); background: rgba(255,255,255,0.05); }
  .btn--secondary {
    background: transparent;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
  }
  .btn--secondary:hover { background: var(--color-accent); color: white; }

  /* Badge decorativo */
  .section-badge {
    display: inline-block;
    background: rgba(255, 77, 0, 0.1);
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: var(--space-md);
    border: 1px solid rgba(255, 77, 0, 0.2);
  }

  /* -------------------------------------------------------
     SEÇÕES — padrão
     ------------------------------------------------------- */
  .section {
    padding: var(--space-5xl) 0;
  }
  .section-dark {
    background: var(--color-bg-dark);
    color: var(--color-text-light);
  }
  .section-title {
    font-size: var(--font-size-heading-lg);
    margin-bottom: var(--space-sm);
  }
  .section-subtitle {
    font-size: var(--font-size-body-lg);
    color: var(--color-text-secondary);
    max-width: 560px;
    line-height: 1.7;
  }
  .section-dark .section-title { color: var(--color-text-light); }
  .section-dark .section-subtitle { color: rgba(255,255,255,0.6); }

  /* -------------------------------------------------------
     ABOUT SECTION — Layout moderno
     ------------------------------------------------------- */
  .about-section {
    padding: var(--space-5xl) 0;
    background: var(--color-bg);
    position: relative;
  }
  .about-section::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  }
  .about-section__inner {
    display: grid; grid-template-columns: 1fr;
    gap: var(--space-3xl); align-items: center;
  }
  .about-section__image {
    position: relative; border-radius: var(--border-radius-xl);
    overflow: hidden; box-shadow: var(--shadow-xl);
    position: relative;
  }
  .about-section__image::after {
    content: ''; position: absolute; inset: 0;
    border: 1px solid rgba(255,77,0,0.2);
    border-radius: inherit;
    pointer-events: none;
  }
  .about-section__image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
  .about-section__title { margin-bottom: var(--space-lg); }
  .about-section__text { font-size: var(--font-size-body); line-height: 1.8; color: var(--color-text-secondary); margin-bottom: var(--space-lg); }
  .about-section__link {
    display: inline-flex; align-items: center; gap: var(--space-sm);
    color: var(--color-accent); font-weight: 700;
    transition: gap var(--transition);
    text-transform: uppercase; letter-spacing: 1px; font-size: var(--font-size-small);
  }
  .about-section__link:hover { gap: var(--space-md); }

  /* -------------------------------------------------------
     PROJETOS — Cards impactantes
     ------------------------------------------------------- */
  .projects-grid {
    padding: var(--space-5xl) 0;
    background: var(--color-bg-dark);
    position: relative; overflow: hidden;
  }
  .projects-grid::before {
    content: ''; position: absolute; top: -50%; right: -20%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,77,0,0.03) 0%, transparent 70%);
    pointer-events: none;
  }
  .projects-grid__title { color: var(--color-text-light); margin-bottom: var(--space-sm); }
  .projects-grid__subtitle { color: rgba(255,255,255,0.5); margin-bottom: var(--space-2xl); max-width: 560px; }
  .projects-grid__cards {
    display: grid; grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .project-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl) var(--space-lg);
    transition: all var(--transition);
    position: relative; overflow: hidden;
  }
  .project-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 3px; height: 100%;
    background: var(--color-accent-gradient);
    opacity: 0; transition: opacity var(--transition);
  }
  .project-card:hover { background: rgba(255,255,255,0.06); transform: translateX(4px); border-color: rgba(255,77,0,0.2); }
  .project-card:hover::before { opacity: 1; }
  .project-card__icon { width: 48px; height: 48px; margin-bottom: var(--space-md); }
  .project-card__icon svg { width: 100%; height: 100%; fill: var(--color-accent); }
  .project-card__name { font-size: var(--font-size-heading); font-weight: 700; color: var(--color-text-light); margin-bottom: var(--space-sm); }
  .project-card__desc { font-size: var(--font-size-small); color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: var(--space-md); }
  .project-card__link { font-size: var(--font-size-small); font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: 1px; }

  /* -------------------------------------------------------
     IMPACT NUMBERS — Seção de destaque
     ------------------------------------------------------- */
  .impact-numbers {
    padding: var(--space-5xl) 0;
    background: var(--color-bg);
    position: relative;
  }
  .impact-numbers::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255,77,0,0.03) 0%, transparent 50%);
  }
  .impact-numbers__title { margin-bottom: var(--space-sm); }
  .impact-numbers__subtitle { color: var(--color-text-secondary); margin-bottom: var(--space-2xl); max-width: 560px; }
  .impact-numbers__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .impact-number {
    text-align: center; padding: var(--space-xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition);
  }
  .impact-number:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(255,77,0,0.15); }
  .impact-number__icon { width: 40px; height: 40px; margin: 0 auto var(--space-md); }
  .impact-number__icon svg { width: 100%; height: 100%; fill: var(--color-accent); }
  .impact-number__value { font-size: 3rem; font-weight: 900; line-height: 1; color: var(--color-text); margin-bottom: var(--space-xs); }
  .impact-number__label { font-size: var(--font-size-small); color: var(--color-text-secondary); max-width: 160px; margin: 0 auto; }

  /* -------------------------------------------------------
     BLOG PREVIEW
     ------------------------------------------------------- */
  .blog-preview {
    padding: var(--space-5xl) 0;
    background: var(--color-bg-dark);
  }
  .blog-preview__title { color: var(--color-text-light); margin-bottom: var(--space-sm); }
  .blog-preview__subtitle { color: rgba(255,255,255,0.5); margin-bottom: var(--space-2xl); max-width: 560px; }
  .blog-preview__cards { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
  .blog-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--border-radius-lg);
    overflow: hidden; transition: all var(--transition);
  }
  .blog-card:hover { border-color: rgba(255,77,0,0.2); transform: translateY(-4px); }
  .blog-card__image { aspect-ratio: 16/9; overflow: hidden; position: relative; }
  .blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
  .blog-card:hover .blog-card__image img { transform: scale(1.05); }
  .blog-card__body { padding: var(--space-lg); }
  .blog-card__category { display: inline-block; background: rgba(255,77,0,0.15); color: var(--color-accent); font-size: var(--font-size-xs); font-weight: 700; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-sm); }
  .blog-card__title { font-size: var(--font-size-body-lg); font-weight: 700; color: var(--color-text-light); margin-bottom: var(--space-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .blog-card__date { font-size: var(--font-size-xs); color: rgba(255,255,255,0.3); margin-bottom: var(--space-sm); }
  .blog-card__excerpt { font-size: var(--font-size-small); color: rgba(255,255,255,0.5); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-md); }
  .blog-card__link { font-size: var(--font-size-small); font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: 1px; }
  .blog-preview__footer { text-align: center; margin-top: var(--space-2xl); }
  .blog-preview__all-link { color: var(--color-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

  /* -------------------------------------------------------
     INTERNAL HERO
     ------------------------------------------------------- */
  .internal-hero {
    min-height: 50vh;
    background: var(--color-primary-dark);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4xl) var(--space-md);
    position: relative; overflow: hidden;
  }
  .internal-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255,77,0,0.08) 0%, transparent 50%);
  }
  .internal-hero__inner { position: relative; z-index: 2; text-align: center; }
  .internal-hero__title { color: var(--color-text-light); margin-bottom: var(--space-md); }
  .internal-hero__breadcrumb { font-size: var(--font-size-small); color: rgba(255,255,255,0.4); }
  .internal-hero__breadcrumb a { color: rgba(255,255,255,0.6); }
  .internal-hero__breadcrumb a:hover { color: var(--color-accent); }

  /* -------------------------------------------------------
     FOOTER
     ------------------------------------------------------- */
  .footer {
    background: var(--color-primary-dark);
    color: rgba(255,255,255,0.6);
    padding: var(--space-4xl) 0 var(--space-xl);
    margin-top: auto;
    position: relative;
  }
  .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-accent-gradient); }
  .footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); }
  .footer__title { color: var(--color-text-light); font-size: var(--font-size-small); font-weight: 700; margin-bottom: var(--space-md); text-transform: uppercase; letter-spacing: 1px; }
  .footer__slogan { font-size: var(--font-size-small); opacity: 0.5; margin-top: var(--space-sm); }
  .footer__links { display: flex; flex-direction: column; gap: var(--space-sm); }
  .footer__links a { color: rgba(255,255,255,0.4); font-size: var(--font-size-small); transition: color var(--transition); }
  .footer__links a:hover { color: var(--color-accent); }
  .footer__social { display: flex; gap: var(--space-sm); }
  .footer__social a { color: rgba(255,255,255,0.4); display: inline-flex; padding: 8px; border-radius: 50%; transition: all var(--transition); border: 1px solid rgba(255,255,255,0.06); }
  .footer__social a:hover { color: var(--color-accent); border-color: rgba(255,77,0,0.3); }
  .footer__social svg { width: 18px; height: 18px; }
  .footer__bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: var(--space-lg); margin-top: var(--space-2xl); text-align: center; font-size: var(--font-size-small); opacity: 0.4; }

  /* -------------------------------------------------------
     BLOG POST DETAIL
     ------------------------------------------------------- */
  .blog-post-detail { padding: var(--space-4xl) 0; background: var(--color-bg); }
  .blog-post-header { max-width: 800px; margin: 0 auto var(--space-2xl); text-align: center; }
  .blog-post-meta { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; font-size: var(--font-size-small); color: var(--color-text-secondary); margin-bottom: var(--space-lg); }
  .blog-post-meta .category { background: rgba(255,77,0,0.1); color: var(--color-accent); padding: 4px 14px; border-radius: 20px; font-weight: 700; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 1px; }
  .blog-post-image { max-width: 900px; margin: 0 auto var(--space-2xl); border-radius: var(--border-radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); }
  .blog-post-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
  .blog-post-body { max-width: 800px; margin: 0 auto; font-size: var(--font-size-body-lg); line-height: 1.9; color: var(--color-text); }
  .blog-post-body p { margin-bottom: var(--space-md); }
  .blog-post-body h2 { margin-top: var(--space-2xl); margin-bottom: var(--space-md); }
  .blog-post-body blockquote { border-left: 3px solid var(--color-accent); padding: var(--space-lg); margin: var(--space-lg) 0; background: var(--color-bg-alt); border-radius: 0 var(--border-radius) var(--border-radius) 0; }
  .blog-post-back { color: var(--color-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: var(--font-size-small); }
  .blog-post-nav { display: flex; justify-content: space-between; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border); }

  /* Partners */
  .partner-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(255,77,0,0.2) !important; }
  .partner-filter-btn.active { background: var(--color-accent); color: white; border-color: var(--color-accent); }
  .partner-filter-btn:not(.active):hover { border-color: var(--color-accent); color: var(--color-accent); }

  /* History Section */
  .history-section { padding: var(--space-5xl) 0; background: var(--color-bg); }
  .history-section__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: center; }
  .history-section__title { margin-bottom: var(--space-lg); }
  .history-section__text { font-size: var(--font-size-body); line-height: 1.8; color: var(--color-text-secondary); margin-bottom: var(--space-md); }
  .history-section__image { border-radius: var(--border-radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); }
  .history-section__image img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

  /* MVV Section */
  .mvv-section { padding: var(--space-5xl) 0; background: var(--color-bg-alt); }
  .mvv-section__title { margin-bottom: var(--space-2xl); }
  .mvv-section__cards { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
  .mvv-card { background: var(--color-bg-card); border-radius: var(--border-radius-lg); padding: var(--space-xl); border: 1px solid var(--color-border); text-align: center; transition: all var(--transition); }
  .mvv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(255,77,0,0.15); }
  .mvv-card__icon { width: 48px; height: 48px; margin: 0 auto var(--space-md); }
  .mvv-card__icon svg { width: 100%; height: 100%; fill: var(--color-accent); }
  .mvv-card__heading { font-weight: 700; margin-bottom: var(--space-md); }
  .mvv-card__text { color: var(--color-text-secondary); line-height: 1.7; }
  .mvv-card--valores .mvv-card__list { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); text-align: left; margin-top: var(--space-lg); }
  .mvv-card__list li { font-size: var(--font-size-small); padding-left: var(--space-md); border-left: 3px solid var(--color-accent); line-height: 1.6; color: var(--color-text-secondary); }
  .mvv-card__list strong { color: var(--color-text); }

  /* CTA Section */
  .cta-section { padding: var(--space-5xl) 0; background: var(--color-bg-dark); }
  .cta-section__title { color: var(--color-text-light); margin-bottom: var(--space-md); }
  .cta-section__text { color: rgba(255,255,255,0.5); margin-bottom: var(--space-xl); max-width: 500px; }
  .cta-section__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }
}

@layer utilities {
  .u-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .u-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-md); }
  .u-text-center { text-align: center; }
  .u-flex-center { display: flex; align-items: center; justify-content: center; }
  .u-grid { display: grid; gap: var(--space-lg); }
}

/* Responsivo */
@media (min-width: 768px) {
  .sidebar-toggle { display: none !important; }
  .hero.hero--home .hero__inner { grid-template-columns: 1fr 1fr; }
  .hero.hero--home .hero__content { padding-right: var(--space-3xl); }
  .about-section__inner { grid-template-columns: 1fr 1fr; }
  .about-section__image { order: 1; }
  .about-section__content { order: 2; }
  .projects-grid__cards { grid-template-columns: 1fr 1fr; }
  .blog-preview__cards { grid-template-columns: 1fr 1fr; }
  .impact-numbers__grid { grid-template-columns: repeat(4, 1fr); }
  .history-section__inner { grid-template-columns: 1.2fr 0.8fr; }
  .mvv-section__cards { grid-template-columns: repeat(3, 1fr); }
  .mvv-card--valores .mvv-card__list { grid-template-columns: repeat(2, 1fr); }
  .partners-grid { grid-template-columns: 1fr 1fr !important; }
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .u-container { padding-inline: var(--space-xl); }
}

@media (min-width: 992px) {
  .blog-preview__cards { grid-template-columns: repeat(3, 1fr); }
  .projects-grid__cards { grid-template-columns: repeat(2, 1fr); }
  .partners-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .footer__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767.98px) {
  body { padding-left: 0; }
  .sidebar {
    transform: translateX(-100%);
    width: 280px;
  }
  .sidebar--open { transform: translateX(0); }
  .sidebar-toggle { display: flex; }
  .sidebar-toggle--open { left: 290px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
  .header, .footer, .skip-link, .theme-toggle { display: none !important; }
  body { background: white; color: black; }
  .internal-hero, .projects-grid, .blog-preview, .impact-numbers { min-height: auto; padding: var(--space-lg) 0; }
}