/*
Theme Name: Fundacion Ecuador FE
Theme URI: https://fundacionecuadorfe.org
Author: Edison Campoverde
Description: Tema WordPress creado desde el mockup HTML de Fundacion Ecuador FE. Incluye pagina principal responsive, secciones de programas, galeria, libros digitales y contacto.
Version: 1.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: fundacion-fe
*/

:root {
      --ink: #18212f;
      --muted: #667085;
      --line: #d7dce5;
      --paper: #f7f9fc;
      --brand: #0f7b6c;
      --brand-2: #f2b705;
      --accent: #c33a32;
      --white: #ffffff;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.45;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 5;
      background: var(--white);
      border-bottom: 1px solid var(--line);
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 8px 28px;
      color: var(--white);
      background: var(--brand);
      font-size: 13px;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 14px 28px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 6px;
      color: var(--white);
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      font-weight: 900;
    }

    nav ul {
      display: flex;
      align-items: center;
      gap: 18px;
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 14px;
    }

    a { color: inherit; text-decoration: none; }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 6px;
      color: var(--white);
      background: var(--accent);
      font-weight: 700;
      border: 0;
    }

    .button.secondary {
      color: var(--brand);
      background: var(--white);
      border: 1px solid var(--brand);
    }

    .hero {
      min-height: 560px;
      display: grid;
      align-items: center;
      background:
        linear-gradient(90deg, rgba(10, 29, 43, .86), rgba(10, 29, 43, .42)),
        url("https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?auto=format&fit=crop&w=1800&q=80");
      background-size: cover;
      background-position: center;
      color: var(--white);
    }

    .hero-inner,
    .section-inner {
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto;
    }

    .eyebrow {
      color: var(--brand-2);
      font-size: 14px;
      font-weight: 800;
      text-transform: uppercase;
    }

    h1 {
      max-width: 760px;
      margin: 12px 0;
      font-size: clamp(38px, 5vw, 68px);
      line-height: 1;
      letter-spacing: 0;
    }

    h2 {
      margin: 0 0 10px;
      font-size: 34px;
      letter-spacing: 0;
    }

    h3 { margin: 0 0 8px; }

    p { margin: 0; }

    .hero p {
      max-width: 620px;
      font-size: 18px;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 26px;
    }

    section { padding: 68px 0; }

    .intro-band {
      background: var(--white);
      border-bottom: 1px solid var(--line);
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: -46px;
      position: relative;
    }

    .stat,
    .card,
    .program,
    .product,
    .gallery-item {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 20px;
    }

    .stat strong {
      display: block;
      color: var(--brand);
      font-size: 28px;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 28px;
      align-items: start;
    }

    .cards-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 24px;
    }

    .cards-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 24px;
    }

    .program img,
    .gallery-item img,
    .product img {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border-radius: 6px;
      margin-bottom: 14px;
      background: #e9edf4;
    }

    .tag {
      display: inline-flex;
      margin-bottom: 10px;
      padding: 4px 8px;
      border-radius: 999px;
      color: var(--brand);
      background: #e8f5f2;
      font-size: 12px;
      font-weight: 700;
    }

    .muted { color: var(--muted); }

    .values {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .value {
      padding: 14px;
      border-left: 4px solid var(--brand-2);
      background: var(--white);
      border-radius: 6px;
    }

    .product .price {
      margin: 10px 0 14px;
      color: var(--accent);
      font-weight: 800;
      font-size: 22px;
    }

    .contact {
      color: var(--white);
      background: #152238;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .contact-box {
      padding: 22px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .14);
    }

    .mobile-preview {
      max-width: 390px;
      margin: 28px auto 0;
      border: 10px solid #202938;
      border-radius: 28px;
      overflow: hidden;
      background: var(--white);
      box-shadow: 0 18px 40px rgba(15, 23, 42, .22);
    }

    .mobile-preview .topbar { display: none; }
    .mobile-preview .nav { padding: 12px; }
    .mobile-preview nav ul { display: none; }
    .mobile-preview .hero { min-height: 420px; }
    .mobile-preview h1 { font-size: 35px; }
    .mobile-preview .hero-inner,
    .mobile-preview .section-inner { width: calc(100% - 28px); }
    .mobile-preview section { padding: 34px 0; }
    .mobile-preview .cards-3,
    .mobile-preview .cards-4,
    .mobile-preview .grid-2,
    .mobile-preview .contact-grid,
    .mobile-preview .stats {
      grid-template-columns: 1fr;
      margin-top: 0;
    }

    footer {
      padding: 20px 28px;
      color: #d8dee9;
      background: #101827;
      font-size: 13px;
    }

    .sitemap {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      margin-top: 24px;
    }

    .sitemap div {
      min-height: 70px;
      padding: 12px;
      border-radius: 8px;
      color: var(--ink);
      background: var(--white);
      border: 1px solid var(--line);
      font-size: 14px;
      font-weight: 700;
    }

    @media (max-width: 860px) {
      .topbar { display: none; }
      nav ul { display: none; }
      .stats,
      .cards-4,
      .cards-3,
      .grid-2,
      .contact-grid,
      .sitemap { grid-template-columns: 1fr; }
      .hero { min-height: 520px; }
      section { padding: 48px 0; }
    }