lrosales
/
armadillos


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339
							<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <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=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: #00294b;
      --color-dark-alt: #0C0A08;
      --color-cream: #FFF8DC;
      --color-light: #FFFDF5;
      --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; }

    body {
      font-family: var(--font-body);
      color: var(--color-text);
      line-height: 1.6;
      overflow-x: hidden;
    }

    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); }

    .top-right-info {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      margin-left: auto;
    }

    .top-right-info span {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.82rem;
    }

    /* ===== MAIN HEADER ===== */
    .main-header {
      background: var(--color-white);
      box-shadow: 0 2px 15px rgba(0,0,0,0.08);
      position: sticky;
      top: 0;
      z-index: 200;
    }

    .main-header .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 0.8rem;
      padding-bottom: 0.8rem;
    }

    .logo img {
      max-height: 60px;
    }

    .main-nav ul {
      list-style: none;
      display: flex;
      gap: 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;
    }

    .main-nav a:hover,
    .main-nav a.active {
      background: var(--color-dark);
      color: var(--color-white);
    }

    .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;
    }

    .hero-content h1 {
      font-family: var(--font-heading);
      font-size: 3.2rem;
      font-weight: 700;
      line-height: 1.15;
      margin-bottom: 1rem;
    }

    .hero-content p {
      font-size: 1.1rem;
      opacity: 0.85;
      margin-bottom: 2rem;
      max-width: 500px;
    }

    .hero-buttons {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.8rem 1.8rem;
      border-radius: 4px;
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 0.9rem;
      border: none;
      cursor: pointer;
      transition: 0.3s;
    }

    .btn-primary {
      background: var(--color-secondary);
      color: var(--color-white);
    }

    .btn-primary:hover { background: var(--color-primary); }

    .btn-outline {
      background: transparent;
      color: var(--color-white);
      border: 2px solid rgba(255,255,255,0.4);
    }

    .btn-outline:hover {
      background: var(--color-white);
      color: var(--color-dark);
    }

    /* ===== SECTION STYLES ===== */
    .section-padding {
      padding: 5rem 0;
    }

    .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-bottom: 0.5rem;
      display: block;
    }

    .section-header h2 {
      font-family: var(--font-heading);
      font-size: 2.2rem;
      font-weight: 700;
      color: var(--color-dark);
      margin-bottom: 1rem;
    }

    .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); }

    /* ===== SECTION WITH BACKGROUND IMAGE ===== */
    .section-bg-image {
      position: relative;
      background: url('/mision-bg.jpg') center center / cover no-repeat;
    }

    .section-bg-image::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(244,244,244,0.75);
    }

    .section-bg-image > * {
      position: relative;
      z-index: 1;
    }

    /* Actividades section with concert background */
    .section-bg-actividades {
      position: relative;
      background: url('/actividades-bg.jpg') center center / cover no-repeat;
    }

    .section-bg-actividades::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(244,244,244,0.75);
    }

    .section-bg-actividades > * {
      position: relative;
      z-index: 1;
    }

    /* Apoyo section with volunteer background */
    .section-bg-apoyo {
      position: relative;
      background: url('/apoyo-bg.jpg') center center / cover no-repeat;
    }

    .section-bg-apoyo::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,41,75,0.82);
    }

    .section-bg-apoyo > * {
      position: relative;
      z-index: 1;
    }

    /* ===== MISSION / VISION CARDS ===== */
    .mv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    .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;
    }

    .mv-card p {
      color: #555;
      font-size: 0.95rem;
      line-height: 1.7;
    }

    /* ===== VALORES ===== */
    .valores-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }

    .valor-item {
      background: var(--color-white);
      border-radius: 8px;
      padding: 2rem 1.5rem;
      text-align: center;
      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;
    }

    .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;
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(0,0,0,0.15);
    }

    .historia-img img {
      width: 100%;
      height: 380px;
      object-fit: cover;
      display: block;
    }

    .highlight-quote {
      background: var(--color-dark);
      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;
      border-left: 4px solid var(--color-accent);
    }

    /* ===== TIMELINE ===== */
    .timeline {
      position: relative;
      max-width: 800px;
      margin: 0 auto;
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--color-accent);
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin-bottom: 2.5rem;
      position: relative;
    }

    .timeline-item::before {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 1rem;
      width: 14px;
      height: 14px;
      background: var(--color-secondary);
      border-radius: 50%;
      border: 3px solid var(--color-gray);
    }

    .timeline-item:nth-child(even) .timeline-content { order: 2; text-align: left; }
    .timeline-item:nth-child(odd) .timeline-content { text-align: right; }

    .timeline-content {
      background: var(--color-white);
      border-radius: 8px;
      padding: 1.5rem;
      box-shadow: 0 3px 15px rgba(0,0,0,0.07);
    }

    .timeline-year {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1rem;
      color: var(--color-secondary);
      margin-bottom: 0.3rem;
    }

    .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: 2rem;
    }

    .actividad-card {
      background: rgba(255,255,255,0.70);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 25px rgba(0,0,0,0.08);
      transition: 0.3s;
    }

    .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;
    }

    .actividad-card ul {
      list-style: none;
      margin-top: 1rem;
    }

    .actividad-card li {
      padding: 0.35rem 0;
      padding-left: 1.5rem;
      position: relative;
      color: #555;
    }

    .actividad-card li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: var(--color-secondary);
      font-weight: 700;
    }

    /* ===== ALIANZAS ===== */
    .alianzas-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    .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);
    }

    .alianza-card .icon {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .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: 1.5rem;
      margin-top: 3rem;
    }

    .stat-box {
      background: rgba(255,255,255,0.05);
      border-radius: 10px;
      padding: 2rem;
      text-align: center;
      border: 1px solid rgba(255,255,255,0.08);
    }

    .stat-number {
      font-family: var(--font-heading);
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--color-accent);
    }

    .stat-label {
      font-size: 0.9rem;
      color: rgba(255,255,255,0.7);
      margin-top: 0.3rem;
    }

    /* ===== TRANSPARENCIA ===== */
    .transparencia-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    .transp-card {
      background: rgba(255,255,255,0.55);
      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;
    }

    /* Transparencia section with background */
    .section-bg-transparencia {
      position: relative;
      background: url('/transparencia-bg.jpg') center center / cover no-repeat;
    }

    .section-bg-transparencia::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(244,244,244,0.70);
    }

    .section-bg-transparencia > * {
      position: relative;
      z-index: 1;
    }

    /* ===== CONTACTO ===== */
    .contact-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      margin-bottom: 3rem;
    }

    .contact-card {
      background: var(--color-white);
      border-radius: 8px;
      padding: 1.8rem;
      text-align: center;
      box-shadow: 0 3px 15px rgba(0,0,0,0.06);
      transition: 0.3s;
    }

    .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-card .label {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--color-muted);
      margin-bottom: 0.3rem;
    }

    .contact-card .value {
      font-weight: 600;
      color: var(--color-dark);
      font-size: 0.95rem;
    }

    /* ===== FOOTER ===== */
    .footer {
      background: var(--color-dark);
      color: rgba(255,255,255,0.7);
      padding: 3rem 0 1.5rem;
    }

    .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;
    }

    /* ===== 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; }
    }

    /* Mobile menu */
    .mobile-menu {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 280px;
      height: 100vh;
      background: var(--color-dark);
      z-index: 300;
      padding: 2rem;
      transform: translateX(-100%);
      transition: 0.3s;
    }

    .mobile-menu.open { transform: translateX(0); }

    .mobile-menu ul {
      list-style: none;
      margin-top: 2rem;
    }

    .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>

  <!-- 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>
      </div>
      <div class="top-right-info">
        <span><i class="fas fa-map-marker-alt"></i> Acapetahua, Chiapas, México</span>
        <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>
  </div>

  <!-- 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>

  <!-- 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="#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>
  </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 class="section-padding section-bg-image" 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="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>

      <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 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 <strong>ingeniero Romeo Velázquez</strong> y el <strong>antropólogo Guillermo Coutiño Archila</strong> reúnen 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" style="display:flex; flex-direction:column; gap:1rem; max-width:100%;">
          <img src="/festival.jpg" alt="Festival Armadillos - Jóvenes de la Marimba" style="width:100%; height:300px; object-fit:cover;">
          <img src="/historia-img2.jpg" alt="Ensamble Armadillos - Festival" style="width:100%; height:300px; object-fit:cover;">
        </div>
      </div>
    </div>
  </section>

  <!-- Actividades -->
  <section class="section-padding section-bg-actividades" 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="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>
  </section>

  <!-- Línea del Tiempo -->
  <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">
        <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 -->
  <section class="section-padding section-bg-apoyo" 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="alianzas-grid">
        <div class="alianza-card">
          <div class="icon">🏛️</div>
          <h3 style="color:#FFF8DC;">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 style="color:#FFF8DC;">Gobierno Municipal</h3>
          <p>Apoyo institucional para la realización de los festivales.</p>
        </div>
      </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 class="section-padding section-bg-transparencia" 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>💰 Meta 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>
          <p style="margin-top:1rem; color:#555; font-size:0.92rem;">Nuestros artistas y voluntarios donan su tiempo y talento, pero cada festival implica gastos esenciales: <strong>hospedaje, alimentación, transporte</strong> y <strong>materiales</strong> (pintura, papel, baterías, limpieza). Tu donativo hace posible que la cultura siga floreciendo en Acapetahua.</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>
    </div>
  </section>

  <!-- Contacto -->
  <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-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>
      <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>
          <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>
          <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>

  <script>
    function toggleMobile() {
      document.getElementById('mobileMenu').classList.toggle('open');
      document.getElementById('mobileOverlay').classList.toggle('open');
    }

    // 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>