feat: complete redesign inspired by Consalt template — professional header, hero banner, sections, timeline

public/index.html

@@ -5,722 +5,1245 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Ensamble Armadillos | Festival Cultural</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Source+Sans+Pro:wght@300;400;600&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
   <style>
     :root {
       --color-primary: #8B4513;
       --color-secondary: #D2691E;
       --color-accent: #CD853F;
-      --color-dark: #2C1810;
+      --color-dark: #00294b;
+      --color-dark-alt: #0C0A08;
       --color-cream: #FFF8DC;
       --color-light: #FFFDF5;
-      --color-text: #3E2723;
+      --color-text: #243238;
       --color-muted: #6D4C41;
+      --color-white: #ffffff;
+      --color-gray: #f4f4f4;
+      --font-heading: 'Poppins', sans-serif;
+      --font-body: 'DM Sans', sans-serif;
     }
 
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
 
     body {
-      font-family: 'Source Sans Pro', sans-serif;
-      background-color: var(--color-light);
+      font-family: var(--font-body);
       color: var(--color-text);
-      line-height: 1.7;
+      line-height: 1.6;
+      overflow-x: hidden;
     }
 
-    /* Fixed topbar with logo */
-    .topbar {
-      position: fixed;
+    a { text-decoration: none; color: inherit; transition: 0.3s; }
+    img { max-width: 100%; vertical-align: middle; }
+
+    /* ===== TOP HEADER BAR ===== */
+    .header-top {
+      background: var(--color-dark);
+      color: var(--color-white);
+      padding: 0.6rem 0;
+      font-size: 0.85rem;
+    }
+
+    .header-top .container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+
+    .header-top a { color: rgba(255,255,255,0.8); }
+    .header-top a:hover { color: var(--color-white); }
+
+    .top-contact {
+      display: flex;
+      gap: 1.5rem;
+      flex-wrap: wrap;
+    }
+
+    .top-contact span {
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+    }
+
+    .top-social {
+      display: flex;
+      gap: 0.8rem;
+    }
+
+    .top-social a {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      background: rgba(255,255,255,0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.8rem;
+      transition: 0.3s;
+    }
+
+    .top-social a:hover { background: var(--color-secondary); }
+
+    /* ===== MAIN HEADER ===== */
+    .main-header {
+      background: var(--color-white);
+      box-shadow: 0 2px 15px rgba(0,0,0,0.08);
+      position: sticky;
       top: 0;
-      left: 0;
-      width: 100%;
-      background: #0C0A08;
-      padding: 0.25rem 1rem;
       z-index: 200;
-      text-align: center;
-      box-shadow: 0 2px 12px rgba(0,0,0,0.5);
     }
 
-    .topbar img {
-      max-width: 160px;
-      width: 100%;
+    .main-header .container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-top: 0.8rem;
+      padding-bottom: 0.8rem;
     }
 
-    /* Push content down so it's not hidden behind topbar */
-    .topbar-spacer {
-      height: 38px;
+    .logo img {
+      max-height: 60px;
     }
 
-    /* Header / Hero */
-    header {
-      background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary) 100%);
-      color: var(--color-cream);
-      padding: 3rem 2rem 2.5rem;
-      text-align: center;
+    .main-nav ul {
+      list-style: none;
+      display: flex;
+      gap: 0.3rem;
     }
 
-    header h1 {
-      font-family: 'Playfair Display', serif;
-      font-size: 3rem;
-      font-weight: 700;
-      letter-spacing: 2px;
-      margin-bottom: 0.3rem;
+    .main-nav a {
+      font-family: var(--font-heading);
+      font-weight: 500;
+      font-size: 0.9rem;
+      color: var(--color-text);
+      padding: 0.5rem 1rem;
+      border-radius: 4px;
+      display: block;
     }
 
-    header .tagline {
-      font-family: 'Playfair Display', serif;
-      font-style: italic;
-      font-size: 1.3rem;
-      opacity: 0.9;
-      margin-bottom: 1.5rem;
+    .main-nav a:hover,
+    .main-nav a.active {
+      background: var(--color-dark);
+      color: var(--color-white);
     }
 
-    .header-badge {
-      display: inline-block;
-      background: rgba(255,248,220,0.15);
-      border: 1px solid rgba(255,248,220,0.3);
-      border-radius: 50px;
-      padding: 0.4rem 1.2rem;
-      font-size: 0.85rem;
-      letter-spacing: 1px;
+    .mobile-toggle {
+      display: none;
+      background: none;
+      border: none;
+      font-size: 1.5rem;
+      cursor: pointer;
+      color: var(--color-dark);
+    }
+
+    /* ===== HERO / BANNER ===== */
+    .hero-area {
+      position: relative;
+      min-height: 580px;
+      display: flex;
+      align-items: center;
+      background: url('/festival.jpg') center center / cover no-repeat;
+    }
+
+    .hero-area::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, rgba(0,41,75,0.85) 0%, rgba(44,24,16,0.75) 100%);
+    }
+
+    .hero-content {
+      position: relative;
+      z-index: 1;
+      color: var(--color-white);
+      max-width: 700px;
+    }
+
+    .hero-content .tagline-top {
+      font-family: var(--font-heading);
+      font-size: 0.9rem;
+      font-weight: 500;
+      letter-spacing: 3px;
       text-transform: uppercase;
+      color: var(--color-accent);
+      margin-bottom: 1rem;
     }
 
-    /* Nav */
-    nav {
-      background: var(--color-dark);
-      position: sticky;
-      top: 38px;
-      z-index: 100;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    .hero-content h1 {
+      font-family: var(--font-heading);
+      font-size: 3.2rem;
+      font-weight: 700;
+      line-height: 1.15;
+      margin-bottom: 1rem;
     }
 
-    nav ul {
-      list-style: none;
+    .hero-content p {
+      font-size: 1.1rem;
+      opacity: 0.85;
+      margin-bottom: 2rem;
+      max-width: 500px;
+    }
+
+    .hero-buttons {
       display: flex;
-      justify-content: center;
+      gap: 1rem;
       flex-wrap: wrap;
-      padding: 0.8rem;
-      gap: 0.5rem;
     }
 
-    nav a {
-      color: var(--color-cream);
-      text-decoration: none;
-      font-size: 0.9rem;
-      padding: 0.4rem 1rem;
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.8rem 1.8rem;
       border-radius: 4px;
-      transition: background 0.2s;
-      letter-spacing: 0.5px;
+      font-family: var(--font-heading);
+      font-weight: 600;
+      font-size: 0.9rem;
+      border: none;
+      cursor: pointer;
+      transition: 0.3s;
     }
 
-    nav a:hover {
-      background: rgba(255,248,220,0.15);
+    .btn-primary {
+      background: var(--color-secondary);
+      color: var(--color-white);
     }
 
-    /* Sections */
-    section {
-      max-width: 900px;
-      margin: 0 auto;
-      padding: 3rem 2rem;
+    .btn-primary:hover { background: var(--color-primary); }
+
+    .btn-outline {
+      background: transparent;
+      color: var(--color-white);
+      border: 2px solid rgba(255,255,255,0.4);
     }
 
-    section:nth-child(even) {
-      background: var(--color-cream);
+    .btn-outline:hover {
+      background: var(--color-white);
+      color: var(--color-dark);
     }
 
-    h2 {
-      font-family: 'Playfair Display', serif;
-      font-size: 2rem;
-      color: var(--color-primary);
-      margin-bottom: 1.5rem;
-      padding-bottom: 0.5rem;
-      border-bottom: 3px solid var(--color-accent);
-      display: inline-block;
+    /* ===== SECTION STYLES ===== */
+    .section-padding {
+      padding: 5rem 0;
     }
 
-    h3 {
-      font-family: 'Playfair Display', serif;
-      font-size: 1.3rem;
+    .section-dark {
+      background: var(--color-gray);
+    }
+
+    .section-dark-alt {
+      background: var(--color-dark);
+      color: var(--color-white);
+    }
+
+    .container {
+      max-width: 1170px;
+      margin: 0 auto;
+      padding: 0 1.5rem;
+    }
+
+    .section-header {
+      text-align: center;
+      margin-bottom: 3rem;
+    }
+
+    .section-header .tag {
+      font-family: var(--font-heading);
+      font-size: 0.8rem;
+      font-weight: 600;
+      letter-spacing: 3px;
+      text-transform: uppercase;
       color: var(--color-secondary);
-      margin-top: 1.5rem;
-      margin-bottom: 0.8rem;
+      margin-bottom: 0.5rem;
+      display: block;
     }
 
-    p {
+    .section-header h2 {
+      font-family: var(--font-heading);
+      font-size: 2.2rem;
+      font-weight: 700;
+      color: var(--color-dark);
       margin-bottom: 1rem;
-      font-size: 1.05rem;
     }
 
-    /* Mission / Vision cards */
-    .cards {
+    .section-header p {
+      color: #666;
+      max-width: 550px;
+      margin: 0 auto;
+    }
+
+    .section-dark .section-header h2 { color: var(--color-white); }
+    .section-dark .section-header p { color: rgba(255,255,255,0.7); }
+
+    /* ===== MISSION / VISION CARDS ===== */
+    .mv-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 1.5rem;
-      margin-top: 1.5rem;
+      gap: 2rem;
     }
 
-    .card {
-      background: white;
-      border-radius: 12px;
-      padding: 1.8rem;
-      box-shadow: 0 4px 16px rgba(139,69,19,0.1);
-      border-top: 4px solid var(--color-accent);
+    .mv-card {
+      background: var(--color-white);
+      border-radius: 8px;
+      padding: 2.5rem 2rem;
+      box-shadow: 0 4px 25px rgba(0,0,0,0.08);
+      border-left: 4px solid var(--color-secondary);
+      transition: 0.3s;
+    }
+
+    .mv-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 8px 35px rgba(0,0,0,0.12);
+    }
+
+    .mv-card .icon {
+      width: 55px;
+      height: 55px;
+      border-radius: 8px;
+      background: rgba(210,105,30,0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.4rem;
+      color: var(--color-secondary);
+      margin-bottom: 1.2rem;
+    }
+
+    .mv-card h3 {
+      font-family: var(--font-heading);
+      font-size: 1.3rem;
+      font-weight: 600;
+      color: var(--color-dark);
+      margin-bottom: 0.8rem;
     }
 
-    .card h3 {
-      margin-top: 0;
+    .mv-card p {
+      color: #555;
+      font-size: 0.95rem;
+      line-height: 1.7;
     }
 
-    /* Valores */
-    .values-grid {
+    /* ===== VALORES ===== */
+    .valores-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-      gap: 1rem;
-      margin-top: 1.5rem;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 1.5rem;
     }
 
-    .value-item {
-      background: white;
+    .valor-item {
+      background: var(--color-white);
       border-radius: 8px;
-      padding: 1.2rem;
+      padding: 2rem 1.5rem;
       text-align: center;
-      box-shadow: 0 2px 8px rgba(139,69,19,0.08);
-      font-weight: 600;
-      color: var(--color-primary);
-      font-size: 1rem;
+      box-shadow: 0 3px 20px rgba(0,0,0,0.06);
       border-bottom: 3px solid var(--color-accent);
+      transition: 0.3s;
+    }
+
+    .valor-item:hover {
+      transform: translateY(-5px);
+      border-bottom-color: var(--color-secondary);
+    }
+
+    .valor-item .icon {
+      font-size: 2rem;
+      margin-bottom: 0.8rem;
     }
 
-    /* Historia */
-    .history-text {
-      background: white;
+    .valor-item h4 {
+      font-family: var(--font-heading);
+      font-weight: 600;
+      color: var(--color-dark);
+    }
+
+    /* ===== HISTORIA ===== */
+    .historia-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 3rem;
+      align-items: center;
+    }
+
+    .historia-text p {
+      margin-bottom: 1rem;
+      color: #555;
+      font-size: 0.97rem;
+      line-height: 1.8;
+    }
+
+    .historia-img {
       border-radius: 12px;
-      padding: 2rem;
-      box-shadow: 0 4px 16px rgba(139,69,19,0.1);
-      border-left: 4px solid var(--color-secondary);
-      font-size: 1.05rem;
+      overflow: hidden;
+      box-shadow: 0 8px 40px rgba(0,0,0,0.15);
     }
 
-    .highlight-box {
+    .historia-img img {
+      width: 100%;
+      height: 380px;
+      object-fit: cover;
+      display: block;
+    }
+
+    .highlight-quote {
       background: var(--color-dark);
-      color: var(--color-cream);
-      border-radius: 12px;
+      color: var(--color-accent);
+      border-radius: 8px;
       padding: 1.5rem 2rem;
       margin-top: 1.5rem;
+      font-family: var(--font-heading);
       font-style: italic;
+      font-size: 1.15rem;
       text-align: center;
-      font-family: 'Playfair Display', serif;
-      font-size: 1.2rem;
+      border-left: 4px solid var(--color-accent);
     }
 
-    /* Timeline */
+    /* ===== TIMELINE ===== */
     .timeline {
       position: relative;
-      padding-left: 2rem;
-      margin-top: 1.5rem;
+      max-width: 800px;
+      margin: 0 auto;
     }
 
     .timeline::before {
       content: '';
       position: absolute;
-      left: 6px;
+      left: 50%;
+      transform: translateX(-50%);
       top: 0;
       bottom: 0;
       width: 3px;
       background: var(--color-accent);
-      border-radius: 2px;
     }
 
     .timeline-item {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 2rem;
+      margin-bottom: 2.5rem;
       position: relative;
-      margin-bottom: 1.5rem;
-      background: white;
-      border-radius: 8px;
-      padding: 1rem 1.5rem;
-      box-shadow: 0 2px 8px rgba(139,69,19,0.08);
     }
 
     .timeline-item::before {
       content: '';
       position: absolute;
-      left: -2rem;
-      top: 1.2rem;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 1rem;
       width: 14px;
       height: 14px;
       background: var(--color-secondary);
       border-radius: 50%;
-      border: 3px solid var(--color-cream);
+      border: 3px solid var(--color-gray);
     }
 
-    .timeline-year {
-      font-family: 'Playfair Display', serif;
-      font-weight: 700;
-      font-size: 1.1rem;
-      color: var(--color-primary);
-    }
+    .timeline-item:nth-child(even) .timeline-content { order: 2; text-align: left; }
+    .timeline-item:nth-child(odd) .timeline-content { text-align: right; }
 
-    .timeline-desc {
-      color: var(--color-muted);
-      font-size: 0.95rem;
-      margin-top: 0.2rem;
+    .timeline-content {
+      background: var(--color-white);
+      border-radius: 8px;
+      padding: 1.5rem;
+      box-shadow: 0 3px 15px rgba(0,0,0,0.07);
     }
 
-    .timeline-note {
-      font-style: italic;
+    .timeline-year {
+      font-family: var(--font-heading);
+      font-weight: 700;
+      font-size: 1rem;
       color: var(--color-secondary);
-      font-size: 0.85rem;
-      margin-top: 0.3rem;
+      margin-bottom: 0.3rem;
     }
 
-    /* Actividades */
-    .activities {
+    .timeline-desc { color: #555; font-size: 0.9rem; }
+    .timeline-note { font-style: italic; color: var(--color-muted); font-size: 0.82rem; margin-top: 0.3rem; }
+
+    /* ===== ACTIVIDADES ===== */
+    .actividades-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 1.5rem;
-      margin-top: 1.5rem;
+      gap: 2rem;
     }
 
-    .activity {
-      background: white;
-      border-radius: 12px;
-      padding: 1.8rem;
-      box-shadow: 0 4px 16px rgba(139,69,19,0.1);
+    .actividad-card {
+      background: var(--color-white);
+      border-radius: 10px;
+      overflow: hidden;
+      box-shadow: 0 5px 25px rgba(0,0,0,0.08);
+      transition: 0.3s;
     }
 
-    .activity h3 {
-      margin-top: 0;
-      color: var(--color-primary);
+    .actividad-card:hover { transform: translateY(-5px); box-shadow: 0 10px 40px rgba(0,0,0,0.12); }
+
+    .actividad-card .card-body { padding: 2rem; }
+
+    .actividad-card h3 {
+      font-family: var(--font-heading);
+      font-size: 1.2rem;
+      color: var(--color-dark);
+      margin-bottom: 0.8rem;
     }
 
-    .activity ul {
+    .actividad-card ul {
       list-style: none;
-      padding: 0;
+      margin-top: 1rem;
     }
 
-    .activity li {
-      padding: 0.3rem 0;
+    .actividad-card li {
+      padding: 0.35rem 0;
       padding-left: 1.5rem;
       position: relative;
+      color: #555;
     }
 
-    .activity li::before {
-      content: '♪';
+    .actividad-card li::before {
+      content: '✓';
       position: absolute;
       left: 0;
       color: var(--color-secondary);
+      font-weight: 700;
     }
 
-    /* Impact */
-    .impact-banner {
-      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
-      color: white;
-      border-radius: 12px;
-      padding: 2rem;
-      margin-top: 1.5rem;
-      text-align: center;
-    }
-
-    .impact-banner h3 {
-      color: var(--color-cream);
-      margin-top: 0;
-    }
-
-    /* Alianzas */
-    .alliance-grid {
+    /* ===== ALIANZAS ===== */
+    .alianzas-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 1.5rem;
-      margin-top: 1.5rem;
+      gap: 2rem;
     }
 
-    .alliance-card {
-      background: white;
-      border-radius: 12px;
-      padding: 1.5rem;
-      box-shadow: 0 4px 16px rgba(139,69,19,0.1);
+    .alianza-card {
+      background: rgba(255,255,255,0.05);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 10px;
+      padding: 2.5rem;
       text-align: center;
+      transition: 0.3s;
+    }
+
+    .alianza-card:hover {
+      background: rgba(255,255,255,0.1);
+      border-color: var(--color-accent);
     }
 
-    .alliance-icon {
+    .alianza-card .icon {
       font-size: 2.5rem;
-      margin-bottom: 0.5rem;
+      margin-bottom: 1rem;
     }
 
-    /* Voluntarios stats */
+    .alianza-card h3 {
+      font-family: var(--font-heading);
+      font-size: 1.2rem;
+      margin-bottom: 0.8rem;
+    }
+
+    .alianza-card p { color: rgba(255,255,255,0.7); font-size: 0.92rem; }
+
+    /* ===== STATS ===== */
     .stats-row {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      gap: 1rem;
-      margin-top: 1.5rem;
+      gap: 1.5rem;
+      margin-top: 3rem;
     }
 
     .stat-box {
-      background: var(--color-dark);
-      color: var(--color-cream);
+      background: rgba(255,255,255,0.05);
       border-radius: 10px;
-      padding: 1.5rem;
+      padding: 2rem;
       text-align: center;
+      border: 1px solid rgba(255,255,255,0.08);
     }
 
     .stat-number {
-      font-family: 'Playfair Display', serif;
-      font-size: 2.2rem;
+      font-family: var(--font-heading);
+      font-size: 2.5rem;
       font-weight: 700;
       color: var(--color-accent);
     }
 
     .stat-label {
       font-size: 0.9rem;
-      opacity: 0.8;
+      color: rgba(255,255,255,0.7);
+      margin-top: 0.3rem;
     }
 
-    /* Contact */
+    /* ===== TRANSPARENCIA ===== */
+    .transparencia-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 2rem;
+    }
+
+    .transp-card {
+      background: var(--color-white);
+      border-radius: 10px;
+      padding: 2rem;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.07);
+    }
+
+    .transp-card h3 {
+      font-family: var(--font-heading);
+      font-size: 1.1rem;
+      color: var(--color-dark);
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 2px solid var(--color-accent);
+      display: inline-block;
+    }
+
+    .budget-amount {
+      font-family: var(--font-heading);
+      font-size: 2.2rem;
+      font-weight: 700;
+      color: var(--color-secondary);
+    }
+
+    .budget-note {
+      font-size: 0.82rem;
+      color: var(--color-muted);
+      font-style: italic;
+    }
+
+    /* ===== CONTACTO ===== */
     .contact-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 1rem;
-      margin-top: 1.5rem;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 1.5rem;
+      margin-bottom: 3rem;
     }
 
-    .contact-item {
-      background: white;
+    .contact-card {
+      background: var(--color-white);
       border-radius: 8px;
-      padding: 1.2rem;
-      display: flex;
-      align-items: center;
-      gap: 0.8rem;
-      box-shadow: 0 2px 8px rgba(139,69,19,0.08);
+      padding: 1.8rem;
+      text-align: center;
+      box-shadow: 0 3px 15px rgba(0,0,0,0.06);
+      transition: 0.3s;
     }
 
-    .contact-icon {
-      font-size: 1.5rem;
+    .contact-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
+
+    .contact-card .icon {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      background: var(--color-dark);
+      color: var(--color-white);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 1rem;
+      font-size: 1.1rem;
     }
 
-    .contact-label {
-      font-size: 0.8rem;
-      color: var(--color-muted);
+    .contact-card .label {
+      font-size: 0.78rem;
       text-transform: uppercase;
-      letter-spacing: 0.5px;
+      letter-spacing: 1px;
+      color: var(--color-muted);
+      margin-bottom: 0.3rem;
     }
 
-    .contact-value {
+    .contact-card .value {
       font-weight: 600;
-      color: var(--color-primary);
+      color: var(--color-dark);
+      font-size: 0.95rem;
     }
 
-    /* Transparencia */
-    .transparency-box {
-      background: white;
-      border-radius: 12px;
-      padding: 1.8rem;
-      box-shadow: 0 4px 16px rgba(139,69,19,0.1);
-      border-left: 4px solid var(--color-accent);
+    /* ===== FOOTER ===== */
+    .footer {
+      background: var(--color-dark);
+      color: rgba(255,255,255,0.7);
+      padding: 3rem 0 1.5rem;
     }
 
-    .budget-highlight {
-      background: var(--color-cream);
-      border-radius: 8px;
-      padding: 1rem;
-      margin-top: 1rem;
+    .footer-grid {
+      display: grid;
+      grid-template-columns: 2fr 1fr 1fr;
+      gap: 3rem;
+      margin-bottom: 2.5rem;
+    }
+
+    .footer-brand img {
+      max-height: 60px;
+      margin-bottom: 1rem;
+      opacity: 0.8;
+    }
+
+    .footer-brand p {
+      font-size: 0.88rem;
+      line-height: 1.7;
+      margin-top: 0.8rem;
+    }
+
+    .footer h4 {
+      font-family: var(--font-heading);
+      font-size: 1rem;
+      color: var(--color-white);
+      margin-bottom: 1.2rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 2px solid var(--color-secondary);
+      display: inline-block;
+    }
+
+    .footer ul {
+      list-style: none;
+    }
+
+    .footer ul li {
+      padding: 0.3rem 0;
+    }
+
+    .footer ul li a {
+      font-size: 0.88rem;
+      color: rgba(255,255,255,0.6);
+    }
+
+    .footer ul li a:hover { color: var(--color-accent); }
+
+    .footer-bottom {
+      border-top: 1px solid rgba(255,255,255,0.1);
+      padding-top: 1.2rem;
       text-align: center;
+      font-size: 0.82rem;
     }
 
-    .budget-amount {
-      font-family: 'Playfair Display', serif;
-      font-size: 1.8rem;
-      color: var(--color-primary);
-      font-weight: 700;
+    /* ===== RESPONSIVE ===== */
+    @media (max-width: 960px) {
+      .main-nav { display: none; }
+      .mobile-toggle { display: block; }
+      .valores-grid { grid-template-columns: repeat(2, 1fr); }
+      .historia-grid { grid-template-columns: 1fr; }
+      .historia-img { order: -1; }
+      .timeline::before { left: 20px; }
+      .timeline-item { grid-template-columns: 1fr; gap: 0; }
+      .timeline-item::before { left: 13px; transform: none; }
+      .timeline-item:nth-child(odd) .timeline-content,
+      .timeline-item:nth-child(even) .timeline-content { text-align: left; order: 0; }
+      .contact-grid { grid-template-columns: repeat(2, 1fr); }
+      .footer-grid { grid-template-columns: 1fr; }
+    }
+
+    @media (max-width: 600px) {
+      .hero-content h1 { font-size: 2.2rem; }
+      .mv-grid { grid-template-columns: 1fr; }
+      .actividades-grid { grid-template-columns: 1fr; }
+      .alianzas-grid { grid-template-columns: 1fr; }
+      .transparencia-grid { grid-template-columns: 1fr; }
+      .stats-row { grid-template-columns: 1fr; }
+      .contact-grid { grid-template-columns: 1fr; }
+      .valores-grid { grid-template-columns: 1fr 1fr; }
+      .section-header h2 { font-size: 1.7rem; }
     }
 
-    /* Footer */
-    footer {
+    /* Mobile menu */
+    .mobile-menu {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 280px;
+      height: 100vh;
       background: var(--color-dark);
-      color: var(--color-cream);
-      text-align: center;
+      z-index: 300;
       padding: 2rem;
-      font-size: 0.9rem;
+      transform: translateX(-100%);
+      transition: 0.3s;
     }
 
-    footer .footer-title {
-      font-family: 'Playfair Display', serif;
-      font-size: 1.1rem;
-      margin-bottom: 0.5rem;
+    .mobile-menu.open { transform: translateX(0); }
+
+    .mobile-menu ul {
+      list-style: none;
+      margin-top: 2rem;
     }
 
-    /* Responsive */
-    @media (max-width: 700px) {
-      header h1 { font-size: 2rem; }
-      .cards { grid-template-columns: 1fr; }
-      .activities { grid-template-columns: 1fr; }
-      .alliance-grid { grid-template-columns: 1fr; }
-      .stats-row { grid-template-columns: 1fr 1fr; }
-      section { padding: 2rem 1rem; }
+    .mobile-menu a {
+      color: var(--color-white);
+      font-family: var(--font-heading);
+      font-size: 1rem;
+      padding: 0.8rem 0;
+      display: block;
+      border-bottom: 1px solid rgba(255,255,255,0.1);
+    }
+
+    .mobile-overlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.5);
+      z-index: 250;
+    }
+
+    .mobile-overlay.open { display: block; }
+
+    .mobile-close {
+      background: none;
+      border: none;
+      color: var(--color-white);
+      font-size: 1.5rem;
+      cursor: pointer;
+      margin-bottom: 1rem;
+    }
+
+    /* ===== ANIMATIONS ===== */
+    .fade-in {
+      opacity: 0;
+      transform: translateY(20px);
+      transition: opacity 0.6s ease, transform 0.6s ease;
+    }
+
+    .fade-in.visible {
+      opacity: 1;
+      transform: translateY(0);
     }
   </style>
 </head>
 <body>
 
-  <!-- Fixed topbar with logo -->
-  <div class="topbar">
-    <img src="/logo.jpg" alt="Ensamble Armadillos">
+  <!-- Top bar -->
+  <div class="header-top">
+    <div class="container">
+      <div class="top-contact">
+        <span><i class="fas fa-phone"></i> <a href="tel:+529181261222">918 126 1222</a></span>
+        <span><i class="fas fa-envelope"></i> <a href="mailto:festival@armadillos.org.mx">festival@armadillos.org.mx</a></span>
+        <span><i class="fas fa-map-marker-alt"></i> Acapetahua, Chiapas, México</span>
+      </div>
+      <div class="top-social">
+        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
+        <a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
+        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+      </div>
+    </div>
   </div>
 
-  <!-- Spacer so content starts below fixed topbar -->
-  <div class="topbar-spacer"></div>
-
-  <!-- Header -->
-  <header>
-    <h1>Ensamble Armadillos</h1>
-    <p class="tagline">Sembrando Cultura, Cosechando Futuro</p>
-    <span class="header-badge">Asociación cultural sin fines de lucro — en proceso de constitución como A.C.</span>
-    <p style="margin-top:1rem; opacity:0.7; font-size:0.95rem;">Acapetahua, Chiapas, México</p>
+  <!-- Main Header -->
+  <header class="main-header">
+    <div class="container">
+      <a href="/" class="logo">
+        <img src="/logo.jpg" alt="Ensamble Armadillos">
+      </a>
+      <nav class="main-nav">
+        <ul>
+          <li><a href="#inicio" class="active">Inicio</a></li>
+          <li><a href="#mision">Misión</a></li>
+          <li><a href="#historia">Historia</a></li>
+          <li><a href="#actividades">Actividades</a></li>
+          <li><a href="#linea-tiempo">Línea del Tiempo</a></li>
+          <li><a href="#contacto">Contacto</a></li>
+        </ul>
+      </nav>
+      <button class="mobile-toggle" onclick="toggleMobile()" aria-label="Abrir menú">
+        <i class="fas fa-bars"></i>
+      </button>
+    </div>
   </header>
 
-  <!-- Hero Banner -->
-  <div style="width:100%; max-height:420px; overflow:hidden; background:#2C1810; text-align:center;">
-    <img src="/festival.jpg" alt="Festival Armadillos - Jóvenes de la Marimba en Vivo" style="width:100%; max-height:420px; object-fit:cover; display:block;">
-    <div style="background:var(--color-dark); color:var(--color-accent); padding:0.6rem 1rem; font-family:'Playfair Display',serif; font-style:italic; font-size:1rem; text-align:center;">Festival Armadillos — Jóvenes de la Marimba en Vivo</div>
-  </div>
-
-  <!-- Navigation -->
-  <nav>
+  <!-- Mobile Menu -->
+  <div class="mobile-overlay" id="mobileOverlay" onclick="toggleMobile()"></div>
+  <div class="mobile-menu" id="mobileMenu">
+    <button class="mobile-close" onclick="toggleMobile()"><i class="fas fa-times"></i></button>
     <ul>
-      <li><a href="#mision">Misión y Visión</a></li>
-      <li><a href="#historia">Historia</a></li>
-      <li><a href="#actividades">Actividades</a></li>
-      <li><a href="#linea-tiempo">Línea del Tiempo</a></li>
-      <li><a href="#alianzas">Alianzas</a></li>
-      <li><a href="#contacto">Contacto</a></li>
+      <li><a href="#inicio" onclick="toggleMobile()">Inicio</a></li>
+      <li><a href="#mision" onclick="toggleMobile()">Misión</a></li>
+      <li><a href="#historia" onclick="toggleMobile()">Historia</a></li>
+      <li><a href="#actividades" onclick="toggleMobile()">Actividades</a></li>
+      <li><a href="#linea-tiempo" onclick="toggleMobile()">Línea del Tiempo</a></li>
+      <li><a href="#contacto" onclick="toggleMobile()">Contacto</a></li>
     </ul>
-  </nav>
+  </div>
+
+  <!-- Hero -->
+  <section class="hero-area" id="inicio">
+    <div class="container">
+      <div class="hero-content">
+        <span class="tagline-top">🎵 Festival Cultural 2026</span>
+        <h1>Ensamble Armadillos</h1>
+        <p>Sembrando cultura en nuestra comunidad a través del arte y la educación, creando espacios de encuentro que fortalezcan los valores sociales.</p>
+        <div class="hero-buttons">
+          <a href="#actividades" class="btn btn-primary"><i class="fas fa-music"></i> Ver Actividades</a>
+          <a href="#contacto" class="btn btn-outline"><i class="fas fa-envelope"></i> Contáctanos</a>
+        </div>
+      </div>
+    </div>
+  </section>
 
   <!-- Misión y Visión -->
-  <section id="mision">
-    <h2>Misión y Visión</h2>
-    <div class="cards">
-      <div class="card">
-        <h3>Misión</h3>
-        <p>Sembrar cultura en nuestra comunidad a través del arte y la educación, creando espacios de encuentro que fortalezcan los valores sociales y acerquen los valores artísticos y humanos a cada rincón de nuestra comunidad, para cosechar un futuro más humano y solidaria.</p>
+  <section class="section-padding section-dark" id="mision">
+    <div class="container">
+      <div class="section-header">
+        <span class="tag">Quiénes Somos</span>
+        <h2>Misión y Visión</h2>
+        <p>Somos una asociación cultural sin fines de lucro comprometida con el arte y la comunidad de Acapetahua, Chiapas.</p>
       </div>
-      <div class="card">
-        <h3>Visión</h3>
-        <p>Ser un referente cultural en nuestra región, reconocido por generar comunidad a través del arte y por formar ciudadanos con valores.</p>
+      <div class="mv-grid">
+        <div class="mv-card">
+          <div class="icon"><i class="fas fa-bullseye"></i></div>
+          <h3>Misión</h3>
+          <p>Sembrar cultura en nuestra comunidad a través del arte y la educación, creando espacios de encuentro que fortalezcan los valores sociales y acerquen los valores artísticos y humanos a cada rincón de nuestra comunidad, para cosechar un futuro más humano y solidarios.</p>
+        </div>
+        <div class="mv-card">
+          <div class="icon"><i class="fas fa-eye"></i></div>
+          <h3>Visión</h3>
+          <p>Ser un referente cultural en nuestra región, reconocido por generar comunidad a través del arte y por formar ciudadanos con valores.</p>
+        </div>
       </div>
-    </div>
 
-    <h3 style="margin-top:2rem;">Valores</h3>
-    <div class="values-grid">
-      <div class="value-item">Identidad</div>
-      <div class="value-item">Trabajo en equipo</div>
-      <div class="value-item">Creatividad</div>
-      <div class="value-item">Compromiso social</div>
+      <h3 style="text-align:center; font-family:var(--font-heading); font-size:1.3rem; color:var(--color-dark); margin-top:3rem; margin-bottom:1.5rem;">Nuestros Valores</h3>
+      <div class="valores-grid">
+        <div class="valor-item">
+          <div class="icon">🏛️</div>
+          <h4>Identidad</h4>
+        </div>
+        <div class="valor-item">
+          <div class="icon">🤝</div>
+          <h4>Trabajo en equipo</h4>
+        </div>
+        <div class="valor-item">
+          <div class="icon">💡</div>
+          <h4>Creatividad</h4>
+        </div>
+        <div class="valor-item">
+          <div class="icon">❤️</div>
+          <h4>Compromiso social</h4>
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- Historia -->
-  <section id="historia">
-    <h2>Nuestra Historia</h2>
-    <div class="history-text">
-      <p>Todo comenzó cuando el antropólogo <strong>Guillermo Coutiño Archilla</strong> reunió a diversos personajes de la vida de Acapetahua, Chiapas, con un propósito sencillo pero poderoso: compartir poesía, música y relatos en un ambiente bohemio. Lo que nació como una reunión de amigos alrededor del arte fue evolucionando hasta convertirse en lo que hoy conocemos como el <strong>Festival Armadillo</strong>.</p>
-      <p>El nombre hace honor a nuestro origen: "Armadillos" es el gentilicio cariñoso con el que se conoce a los acapetahuenses. Aunque el festival congrega hoy a público de comunidades aledañas y nuestros miembros residen en distintos puntos del país, con un alcance regional, la semilla siempre fue y será Acapetahua.</p>
-      <p>Un momento que marcó un antes y un después fue el cuarto Festival Armadillos, celebrado el <strong>28 de diciembre de 2015</strong>, cuando por primera vez el festival se realizó en las instalaciones del Auditorio de la UNICACH en Acapetahua. Desde entonces, el reconocimiento ha crecido tanto que, según los propios habitantes, asistir al Festival Armadillos figura entre las diez cosas más importantes que hacer en Acapetahua.</p>
-      <p>Después de siete ediciones (2012–2019), el festival guardó una pausa en los años recientes, en parte a causa de la pandemia. Hoy, <strong>Ensamble Armadillos</strong> retoma su misión con la misma fuerza del primer día: porque la cultura no se hereda, se siembra.</p>
-      <p class="timeline-note" style="margin-top:1rem;">Próximamente: homenaje a los maestros Felipe Orozco y Humberto Velázquez.</p>
-    </div>
-
-    <div class="highlight-box">
-      "La cultura no se hereda, se siembra."
+  <section class="section-padding" id="historia">
+    <div class="container">
+      <div class="section-header">
+        <span class="tag">Origen del Festival</span>
+        <h2>Nuestra Historia</h2>
+      </div>
+      <div class="historia-grid">
+        <div class="historia-text">
+          <p>Todo comenzó cuando el antropólogo <strong>Guillermo Coutiño Archilla</strong> reunió a diversos personajes de la vida de Acapetahua, Chiapas, con un propósito sencillo pero poderoso: compartir poesía, música y relatos en un ambiente bohemio.</p>
+          <p>Lo que nació como una reunión de amigos alrededor del arte fue evolucionando hasta convertirse en lo que hoy conocemos como el <strong>Festival Armadillo</strong>.</p>
+          <p>El nombre hace honor a nuestro origen: "Armadillos" es el gentilicio cariñoso con el que se conoce a los acapetahuenses.</p>
+          <p>Un momento que marcó un antes y un después fue el cuarto Festival Armadillos, celebrado el <strong>28 de diciembre de 2015</strong>, cuando por primera vez el festival se realizó en las instalaciones del Auditorio de la UNICACH en Acapetahua.</p>
+          <p>Después de siete ediciones (2012–2019), el festival guardó una pausa. Hoy, <strong>Ensamble Armadillos</strong> retoma su misión con la misma fuerza del primer día.</p>
+          <div class="highlight-quote">
+            "La cultura no se hereda, se siembra."
+          </div>
+        </div>
+        <div class="historia-img">
+          <img src="/festival.jpg" alt="Festival Armadillos">
+        </div>
+      </div>
     </div>
   </section>
 
   <!-- Actividades -->
-  <section id="actividades">
-    <h2>Actividades y Programas</h2>
-
-    <div class="activities">
-      <div class="activity">
-        <h3>Festival Armadillos</h3>
-        <p>Nuestro evento principal es el Festival Armadillos, un encuentro cultural que reúne:</p>
-        <ul>
-          <li>Música</li>
-          <li>Danza</li>
-          <li>Poesía y literatura</li>
-          <li>Cápsulas de contenido sobre salud y prevención</li>
-        </ul>
-        <p style="margin-top:1rem;">El festival está dirigido a la comunidad en general, con un énfasis especial en las nuevas generaciones, para que las mentes jóvenes comprendan y amen la cultura.</p>
+  <section class="section-padding section-dark" id="actividades">
+    <div class="container">
+      <div class="section-header">
+        <span class="tag">Programas</span>
+        <h2>Actividades y Programas</h2>
+        <p>Nuestro evento principal es el Festival Armadillos, un encuentro cultural que reúne música, danza, poesía y más.</p>
       </div>
-
-      <div class="activity">
-        <h3>Impacto en la Juventud</h3>
-        <p>Algunos de nuestros jóvenes participantes han decidido realizar estudios formales en instituciones de arte del estado de Chiapas, lo que demuestra que brindar una ventana de acercamiento al arte y la cultura trae resultados concretos y transformadores.</p>
-        <p>El arte abre puertas que nunca se habían imaginado. Cada festival es una semilla que germina en las vidas de quienes participan.</p>
+      <div class="actividades-grid">
+        <div class="actividad-card">
+          <div class="card-body">
+            <h3>🎶 Festival Armadillos</h3>
+            <p>Nuestro evento principal es un encuentro cultural que reúne a la comunidad en torno al arte.</p>
+            <ul>
+              <li>Música en vivo</li>
+              <li>Danza y expresión artística</li>
+              <li>Poesía y literatura</li>
+              <li>Cápsulas de salud y prevención</li>
+            </ul>
+          </div>
+        </div>
+        <div class="actividad-card">
+          <div class="card-body">
+            <h3>🌟 Impacto en la Juventud</h3>
+            <p>Algunos de nuestros jóvenes participantes han decidido realizar estudios formales en instituciones de arte del estado de Chiapas.</p>
+            <ul>
+              <li>Ventana al arte y la cultura</li>
+              <li>Formación de ciudadanos con valores</li>
+              <li>Espacios de encuentro comunitario</li>
+              <li>Semilla para futuros artistas</li>
+            </ul>
+          </div>
+        </div>
       </div>
     </div>
-
-    <div class="impact-banner">
-      <h3>Impacto en la comunidad</h3>
-      <p>El Festival Armadillos se ha consolidado como un espacio donde la música, la poesía y la danza se encuentran para fortalecer la identidad y los valores de nuestra comunidad.</p>
-    </div>
   </section>
 
   <!-- Línea del Tiempo -->
-  <section id="linea-tiempo">
-    <h2>Línea del Tiempo del Festival</h2>
-    <div class="timeline">
-      <div class="timeline-item">
-        <div class="timeline-year">I Festival — 2012</div>
-        <div class="timeline-desc">Primera edición del festival</div>
-        <div class="timeline-note">(por confirmar detalles)</div>
-      </div>
-      <div class="timeline-item">
-        <div class="timeline-year">II Festival — 2013</div>
-        <div class="timeline-desc">Segunda edición del festival</div>
-        <div class="timeline-note">(por confirmar detalles)</div>
-      </div>
-      <div class="timeline-item">
-        <div class="timeline-year">III Festival — 2014</div>
-        <div class="timeline-desc">Tercera edición del festival</div>
-        <div class="timeline-note">(por confirmar detalles)</div>
+  <section class="section-padding" id="linea-tiempo">
+    <div class="container">
+      <div class="section-header">
+        <span class="tag">Trayectoria</span>
+        <h2>Línea del Tiempo del Festival</h2>
+        <p>Siete ediciones que han marcado la vida cultural de Acapetahua.</p>
       </div>
-      <div class="timeline-item">
-        <div class="timeline-year">IV Festival — 2015</div>
-        <div class="timeline-desc">Auditorio UNICACH Acapetahua</div>
-        <div class="timeline-note">Por primera vez en estas instalaciones — punto de inflexión</div>
-      </div>
-      <div class="timeline-item">
-        <div class="timeline-year">V Festival — 2017</div>
-        <div class="timeline-desc">Auditorio UNICACH Acapetahua</div>
-        <div class="timeline-note">Homenaje al Prof. Felipe Orozco</div>
-      </div>
-      <div class="timeline-item">
-        <div class="timeline-year">VI Festival — 2018</div>
-        <div class="timeline-desc">Auditorio UNICACH Acapetahua</div>
-        <div class="timeline-note">(por confirmar detalles)</div>
-      </div>
-      <div class="timeline-item">
-        <div class="timeline-year">VII Festival — 2019</div>
-        <div class="timeline-desc">Auditorio UNICACH Acapetahua</div>
-        <div class="timeline-note">Homenaje al Prof. Humberto Velázquez</div>
-      </div>
-      <div class="timeline-item">
-        <div class="timeline-year">2020 – 2025</div>
-        <div class="timeline-desc">Pausa del festival</div>
-        <div class="timeline-note">A causa de la pandemia y circunstancias externas</div>
-      </div>
-      <div class="timeline-item">
-        <div class="timeline-year">VIII Festival — Próximamente</div>
-        <div class="timeline-desc">En preparación</div>
-        <div class="timeline-note">¡El festival regresa con nueva energía!</div>
+      <div class="timeline">
+        <div class="timeline-item">
+          <div class="timeline-content">
+            <div class="timeline-year">I Festival — 2012</div>
+            <div class="timeline-desc">Primera edición del festival</div>
+            <div class="timeline-note">(por confirmar detalles)</div>
+          </div>
+          <div></div>
+        </div>
+        <div class="timeline-item">
+          <div></div>
+          <div class="timeline-content">
+            <div class="timeline-year">II Festival — 2013</div>
+            <div class="timeline-desc">Segunda edición</div>
+            <div class="timeline-note">(por confirmar)</div>
+          </div>
+        </div>
+        <div class="timeline-item">
+          <div class="timeline-content">
+            <div class="timeline-year">III Festival — 2014</div>
+            <div class="timeline-desc">Tercera edición</div>
+            <div class="timeline-note">(por confirmar)</div>
+          </div>
+          <div></div>
+        </div>
+        <div class="timeline-item">
+          <div></div>
+          <div class="timeline-content">
+            <div class="timeline-year">IV Festival — 2015</div>
+            <div class="timeline-desc">Auditorio UNICACH — primera vez en estas instalaciones</div>
+            <div class="timeline-note">Punto de inflexión del festival</div>
+          </div          </div>
+        </div>
+        <div class="timeline-item">
+          <div class="timeline-content">
+            <div class="timeline-year">V Festival — 2017</div>
+            <div class="timeline-desc">Auditorio UNICACH</div>
+            <div class="timeline-note">Homenaje al Prof. Felipe Orozco</div>
+          </div>
+          <div></div>
+        </div>
+        <div class="timeline-item">
+          <div></div>
+          <div class="timeline-content">
+            <div class="timeline-year">VI Festival — 2018</div>
+            <div class="timeline-desc">Auditorio UNICACH</div>
+            <div class="timeline-note">(por confirmar)</div>
+          </div>
+        </div>
+        <div class="timeline-item">
+          <div class="timeline-content">
+            <div class="timeline-year">VII Festival — 2019</div>
+            <div class="timeline-desc">Auditorio UNICACH — Homenaje al Prof. Humberto Velázquez</div>
+            <div class="timeline-note">Última edición antes de la pausa</div>
+          </div>
+          <div></div>
+        </div>
+        <div class="timeline-item">
+          <div></div>
+          <div class="timeline-content">
+            <div class="timeline-year">2020 – 2025</div>
+            <div class="timeline-desc">Pausa del festival</div>
+            <div class="timeline-note">A causa de la pandemia</div>
+          </div>
+        </div>
+        <div class="timeline-item">
+          <div class="timeline-content">
+            <div class="timeline-year">VIII Festival — ¡Próximamente!</div>
+            <div class="timeline-desc">En preparación</div>
+            <div class="timeline-note">¡El festival regresa!</div>
+          </div>
+          <div></div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- Alianzas y Voluntariado -->
-  <section id="alianzas">
-    <h2>Alianzas y Voluntariado</h2>
-
-    <div class="alliance-grid">
-      <div class="alliance-card">
-        <div class="alliance-icon">🏛️</div>
-        <h3>Iniciativa Privada</h3>
-        <p>Empresas y negocios locales que creen en el poder transformador de la cultura.</p>
+  <!-- Alianzas -->
+  <section class="section-padding section-dark-alt" id="alianzas">
+    <div class="container">
+      <div class="section-header">
+        <span class="tag" style="color:var(--color-accent);">Apoyo</span>
+        <h2 style="color:var(--color-white);">Alianzas y Voluntariado</h2>
+        <p style="color:rgba(255,255,255,0.7);">Los festivales se realizan al 100% con donaciones de la iniciativa privada y el gobierno municipal.</p>
       </div>
-      <div class="alliance-card">
-        <div class="alliance-icon">🏢</div>
-        <h3>Gobierno Municipal</h3>
-        <p>Apoyo institucional para la realización de los festivales.</p>
+      <div class="alianzas-grid">
+        <div class="alianza-card">
+          <div class="icon">🏛️</div>
+          <h3>Iniciativa Privada</h3>
+          <p>Empresas y negocios locales que creen en el poder transformador de la cultura.</p>
+        </div>
+        <div class="alianza-card">
+          <div class="icon">🏢</div>
+          <h3>Gobierno Municipal</h3>
+          <p>Apoyo institucional para la realización de los festivales.</p>
+        </div>
       </div>
-    </div>
-
-    <h3 style="margin-top:2rem;">Voluntariado</h3>
-    <p>Contamos con aproximadamente <strong>20 voluntarios activos</strong> entre organizadores, músicos, médicos y personal de apoyo, quienes hacen posible la realización de cada evento. A la fecha, han participado más de <strong>50 voluntarios</strong> a lo largo de nuestra trayectoria.</p>
 
-    <div class="stats-row">
-      <div class="stat-box">
-        <div class="stat-number">20+</div>
-        <div class="stat-label">Voluntarios activos</div>
-      </div>
-      <div class="stat-box">
-        <div class="stat-number">50+</div>
-        <div class="stat-label">Voluntarios históricos</div>
-      </div>
-      <div class="stat-box">
-        <div class="stat-number">100%</div>
-        <div class="stat-label">Donaciones</div>
+      <h3 style="text-align:center; font-family:var(--font-heading); color:var(--color-white); margin-top:3rem; margin-bottom:1rem;">Voluntarios</h3>
+      <div class="stats-row">
+        <div class="stat-box">
+          <div class="stat-number">20+</div>
+          <div class="stat-label">Voluntarios activos</div>
+        </div>
+        <div class="stat-box">
+          <div class="stat-number">50+</div>
+          <div class="stat-label">Voluntarios históricos</div>
+        </div>
+        <div class="stat-box">
+          <div class="stat-number">100%</div>
+          <div class="stat-label">Financiado con donaciones</div>
+        </div>
       </div>
     </div>
   </section>
 
   <!-- Transparencia -->
-  <section id="transparencia">
-    <h2>Transparencia</h2>
-    <div class="transparency-box">
-      <p><strong>Presupuesto aproximado por festival:</strong> $50,000 MXN</p>
-      <p class="timeline-note" style="margin-top:0.3rem;">(Dato referente al año 2019 — por actualizar)</p>
-
-      <div class="budget-highlight">
-        <div class="budget-amount">$50,000 MXN</div>
-        <div>por festival — financiado al 100% con donaciones</div>
+  <section class="section-padding section-dark" id="transparencia">
+    <div class="container">
+      <div class="section-header">
+        <span class="tag">Rendición de cuentas</span>
+        <h2>Transparencia</h2>
+      </div>
+      <div class="transparencia-grid">
+        <div class="transp-card">
+          <h3>💰 Presupuesto por Festival</h3>
+          <div class="budget-amount">$50,000 MXN</div>
+          <p class="budget-note">Dato referente al año 2019 — por actualizar</p>
+          <p style="margin-top:1rem; color:#555; font-size:0.92rem;">Por festival — financiado al 100% con donaciones de la iniciativa privada y el gobierno municipal.</p>
+        </div>
+        <div class="transp-card">
+          <h3>🤝 Formas de Aportación</h3>
+          <ul style="list-style:none; padding:0; margin-top:1rem;">
+            <li style="padding:0.5rem 0; border-bottom:1px solid #eee; display:flex; align-items:center; gap:0.5rem;">
+              <span style="color:var(--color-secondary);">💵</span> Efectivo
+            </li>
+            <li style="padding:0.5rem 0; border-bottom:1px solid #eee; display:flex; align-items:center; gap:0.5rem;">
+              <span style="color:var(--color-secondary);">🤝</span> Voluntariado
+            </li>
+            <li style="padding:0.5rem 0; color:#999; font-style:italic; display:flex; align-items:center; gap:0.5rem;">
+              <span>🏦</span> Datos bancarios — pendientes
+            </li>
+          </ul>
+        </div>
       </div>
-
-      <h3 style="margin-top:1.5rem;">Formas de aportación</h3>
-      <ul style="list-style:none; padding:0;">
-        <li style="padding:0.3rem 0;">💵 Efectivo</li>
-        <li style="padding:0.3rem 0;">🤝 Voluntariado</li>
-        <li style="padding:0.3rem 0;" class="timeline-note">Datos bancarios para donativos — pendientes</li>
-      </ul>
     </div>
   </section>
 
   <!-- Contacto -->
-  <section id="contacto">
-    <h2>Datos de Contacto</h2>
-    <div class="contact-grid">
-      <div class="contact-item">
-        <div class="contact-icon">📧</div>
-        <div>
-          <div class="contact-label">Correo</div>
-          <div class="contact-value">festival@armadillos.org.mx</div>
-        </div>
+  <section class="section-padding" id="contacto">
+    <div class="container">
+      <div class="section-header">
+        <span class="tag">Ponerse en contacto</span>
+        <h2>Datos de Contacto</h2>
       </div>
-      <div class="contact-item">
-        <div class="contact-icon">📞</div>
-        <div>
-          <div class="contact-label">Teléfono</div>
-          <div class="contact-value">918 126 1222</div>
+      <div class="contact-grid">
+        <div class="contact-card">
+          <div class="icon"><i class="fas fa-envelope"></i></div>
+          <div class="label">Correo</div>
+          <div class="value">festival@armadillos.org.mx</div>
+        </div>
+        <div class="contact-card">
+          <div class="icon"><i class="fas fa-phone"></i></div>
+          <div class="label">Teléfono</div>
+          <div class="value">918 126 1222</div>
+        </div>
+        <div class="contact-card">
+          <div class="icon"><i class="fas fa-map-marker-alt"></i></div>
+          <div class="label">Ubicación</div>
+          <div class="value">Acapetahua, Chiapas</div>
+        </div>
+        <div class="contact-card">
+          <div class="icon"><i class="fas fa-globe"></i></div>
+          <div class="label">Sitio web</div>
+          <div class="value">En proceso</div>
         </div>
       </div>
-      <div class="contact-item">
-        <div class="contact-icon">📍</div>
+      <p style="text-align:center; color:#888; font-style:italic;">Directorio pendiente: presidente, secretario, tesorero y vocales.</p>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-grid">
+        <div class="footer-brand">
+          <img src="/logo.jpg" alt="Ensamble Armadillos">
+          <p><strong>Ensamble Armadillos</strong><br>Sembrando Cultura, Cosechando Futuro</p>
+          <p style="margin-top:0.5rem; font-size:0.82rem;">Asociación cultural sin fines de lucro — en proceso de constitución como A.C.<br>Acapetahua, Chiapas, México</p>
+        </div>
         <div>
-          <div class="contact-label">Ubicación</div>
-          <div class="contact-value">Acapetahua, Chiapas, México</div>
+          <h4>Navegación</h4>
+          <ul>
+            <li><a href="#inicio">Inicio</a></li>
+            <li><a href="#mision">Misión</a></li>
+            <li><a href="#historia">Historia</a></li>
+            <li><a href="#actividades">Actividades</a></li>
+            <li><a href="#linea-tiempo">Línea del Tiempo</a></li>
+            <li><a href="#contacto">Contacto</a></li>
+          </ul>
         </div>
-      </div>
-      <div class="contact-item">
-        <div class="contact-icon">🌐</div>
         <div>
-          <div class="contact-label">Sitio web</div>
-          <div class="contact-value">En proceso</div>
+          <h4>Contacto</h4>
+          <ul>
+            <li><a href="mailto:festival@armadillos.org.mx">festival@armadillos.org.mx</a></li>
+            <li><a href="tel:+529181261222">918 126 1222</a></li>
+            <li><a href="#">Facebook</a></li>
+            <li><a href="#">YouTube</a></li>
+          </ul>
         </div>
       </div>
+      <div class="footer-bottom">
+        <p>© 2026 Ensamble Armadillos · Documento institucional · Todos los derechos reservados</p>
+      </div>
     </div>
+  </footer>
 
-    <h3 style="margin-top:2rem;">Directorio</h3>
-    <p class="timeline-note" style="margin-top:0.5rem;">Pendiente: presidente, secretario, tesorero y vocales.</p>
-  </section>
+  <script>
+    function toggleMobile() {
+      document.getElementById('mobileMenu').classList.toggle('open');
+      document.getElementById('mobileOverlay').classList.toggle('open');
+    }
 
-  <!-- Footer -->
-  <footer>
-    <div class="footer-title">Ensamble Armadillos</div>
-    <div>Sembrando Cultura, Cosechando Futuro</div>
-    <div style="margin-top:0.5rem; opacity:0.6;">Acapetahua, Chiapas, México</div>
-    <div style="margin-top:0.5rem; opacity:0.5; font-size:0.8rem;">Documento institucional · 2026</div>
-  </footer>
+    // Smooth scroll
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', function(e) {
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+          e.preventDefault();
+          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      });
+    });
+
+    // Active nav highlight
+    const sections = document.querySelectorAll('section[id]');
+    window.addEventListener('scroll', () => {
+      let current = '';
+      sections.forEach(section => {
+        const top = section.offsetTop - 80;
+        if (window.scrollY >= top) current = section.getAttribute('id');
+      });
+      document.querySelectorAll('.main-nav a').forEach(a => {
+        a.classList.remove('active');
+        if (a.getAttribute('href') === '#' + current) a.classList.add('active');
+      });
+    });
+
+    // Fade-in animation on scroll
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+        }
+      });
+    }, { threshold: 0.1 });
+
+    document.querySelectorAll('.mv-card, .valor-item, .actividad-card, .timeline-item, .alianza-card, .contact-card').forEach(el => {
+      el.classList.add('fade-in');
+      observer.observe(el);
+    });
+  </script>
 
 </body>
 </html>