index.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Ensamble Armadillos | Festival Cultural</title>
  7. <link rel="preconnect" href="https://fonts.googleapis.com">
  8. <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">
  9. <style>
  10. :root {
  11. --color-primary: #8B4513;
  12. --color-secondary: #D2691E;
  13. --color-accent: #CD853F;
  14. --color-dark: #2C1810;
  15. --color-cream: #FFF8DC;
  16. --color-light: #FFFDF5;
  17. --color-text: #3E2723;
  18. --color-muted: #6D4C41;
  19. }
  20. * {
  21. margin: 0;
  22. padding: 0;
  23. box-sizing: border-box;
  24. }
  25. body {
  26. font-family: 'Source Sans Pro', sans-serif;
  27. background-color: var(--color-light);
  28. color: var(--color-text);
  29. line-height: 1.7;
  30. }
  31. /* Fixed topbar with logo */
  32. .topbar {
  33. position: fixed;
  34. top: 0;
  35. left: 0;
  36. width: 100%;
  37. background: #0C0A08;
  38. padding: 0.25rem 1rem;
  39. z-index: 200;
  40. text-align: center;
  41. box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  42. }
  43. .topbar img {
  44. max-width: 160px;
  45. width: 100%;
  46. }
  47. /* Push content down so it's not hidden behind topbar */
  48. .topbar-spacer {
  49. height: 38px;
  50. }
  51. /* Header / Hero */
  52. header {
  53. background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary) 100%);
  54. color: var(--color-cream);
  55. padding: 3rem 2rem 2.5rem;
  56. text-align: center;
  57. }
  58. header h1 {
  59. font-family: 'Playfair Display', serif;
  60. font-size: 3rem;
  61. font-weight: 700;
  62. letter-spacing: 2px;
  63. margin-bottom: 0.3rem;
  64. }
  65. header .tagline {
  66. font-family: 'Playfair Display', serif;
  67. font-style: italic;
  68. font-size: 1.3rem;
  69. opacity: 0.9;
  70. margin-bottom: 1.5rem;
  71. }
  72. .header-badge {
  73. display: inline-block;
  74. background: rgba(255,248,220,0.15);
  75. border: 1px solid rgba(255,248,220,0.3);
  76. border-radius: 50px;
  77. padding: 0.4rem 1.2rem;
  78. font-size: 0.85rem;
  79. letter-spacing: 1px;
  80. text-transform: uppercase;
  81. }
  82. /* Nav */
  83. nav {
  84. background: var(--color-dark);
  85. position: sticky;
  86. top: 38px;
  87. z-index: 100;
  88. box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  89. }
  90. nav ul {
  91. list-style: none;
  92. display: flex;
  93. justify-content: center;
  94. flex-wrap: wrap;
  95. padding: 0.8rem;
  96. gap: 0.5rem;
  97. }
  98. nav a {
  99. color: var(--color-cream);
  100. text-decoration: none;
  101. font-size: 0.9rem;
  102. padding: 0.4rem 1rem;
  103. border-radius: 4px;
  104. transition: background 0.2s;
  105. letter-spacing: 0.5px;
  106. }
  107. nav a:hover {
  108. background: rgba(255,248,220,0.15);
  109. }
  110. /* Sections */
  111. section {
  112. max-width: 900px;
  113. margin: 0 auto;
  114. padding: 3rem 2rem;
  115. }
  116. section:nth-child(even) {
  117. background: var(--color-cream);
  118. }
  119. h2 {
  120. font-family: 'Playfair Display', serif;
  121. font-size: 2rem;
  122. color: var(--color-primary);
  123. margin-bottom: 1.5rem;
  124. padding-bottom: 0.5rem;
  125. border-bottom: 3px solid var(--color-accent);
  126. display: inline-block;
  127. }
  128. h3 {
  129. font-family: 'Playfair Display', serif;
  130. font-size: 1.3rem;
  131. color: var(--color-secondary);
  132. margin-top: 1.5rem;
  133. margin-bottom: 0.8rem;
  134. }
  135. p {
  136. margin-bottom: 1rem;
  137. font-size: 1.05rem;
  138. }
  139. /* Mission / Vision cards */
  140. .cards {
  141. display: grid;
  142. grid-template-columns: 1fr 1fr;
  143. gap: 1.5rem;
  144. margin-top: 1.5rem;
  145. }
  146. .card {
  147. background: white;
  148. border-radius: 12px;
  149. padding: 1.8rem;
  150. box-shadow: 0 4px 16px rgba(139,69,19,0.1);
  151. border-top: 4px solid var(--color-accent);
  152. }
  153. .card h3 {
  154. margin-top: 0;
  155. }
  156. /* Valores */
  157. .values-grid {
  158. display: grid;
  159. grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  160. gap: 1rem;
  161. margin-top: 1.5rem;
  162. }
  163. .value-item {
  164. background: white;
  165. border-radius: 8px;
  166. padding: 1.2rem;
  167. text-align: center;
  168. box-shadow: 0 2px 8px rgba(139,69,19,0.08);
  169. font-weight: 600;
  170. color: var(--color-primary);
  171. font-size: 1rem;
  172. border-bottom: 3px solid var(--color-accent);
  173. }
  174. /* Historia */
  175. .history-text {
  176. background: white;
  177. border-radius: 12px;
  178. padding: 2rem;
  179. box-shadow: 0 4px 16px rgba(139,69,19,0.1);
  180. border-left: 4px solid var(--color-secondary);
  181. font-size: 1.05rem;
  182. }
  183. .highlight-box {
  184. background: var(--color-dark);
  185. color: var(--color-cream);
  186. border-radius: 12px;
  187. padding: 1.5rem 2rem;
  188. margin-top: 1.5rem;
  189. font-style: italic;
  190. text-align: center;
  191. font-family: 'Playfair Display', serif;
  192. font-size: 1.2rem;
  193. }
  194. /* Timeline */
  195. .timeline {
  196. position: relative;
  197. padding-left: 2rem;
  198. margin-top: 1.5rem;
  199. }
  200. .timeline::before {
  201. content: '';
  202. position: absolute;
  203. left: 6px;
  204. top: 0;
  205. bottom: 0;
  206. width: 3px;
  207. background: var(--color-accent);
  208. border-radius: 2px;
  209. }
  210. .timeline-item {
  211. position: relative;
  212. margin-bottom: 1.5rem;
  213. background: white;
  214. border-radius: 8px;
  215. padding: 1rem 1.5rem;
  216. box-shadow: 0 2px 8px rgba(139,69,19,0.08);
  217. }
  218. .timeline-item::before {
  219. content: '';
  220. position: absolute;
  221. left: -2rem;
  222. top: 1.2rem;
  223. width: 14px;
  224. height: 14px;
  225. background: var(--color-secondary);
  226. border-radius: 50%;
  227. border: 3px solid var(--color-cream);
  228. }
  229. .timeline-year {
  230. font-family: 'Playfair Display', serif;
  231. font-weight: 700;
  232. font-size: 1.1rem;
  233. color: var(--color-primary);
  234. }
  235. .timeline-desc {
  236. color: var(--color-muted);
  237. font-size: 0.95rem;
  238. margin-top: 0.2rem;
  239. }
  240. .timeline-note {
  241. font-style: italic;
  242. color: var(--color-secondary);
  243. font-size: 0.85rem;
  244. margin-top: 0.3rem;
  245. }
  246. /* Actividades */
  247. .activities {
  248. display: grid;
  249. grid-template-columns: 1fr 1fr;
  250. gap: 1.5rem;
  251. margin-top: 1.5rem;
  252. }
  253. .activity {
  254. background: white;
  255. border-radius: 12px;
  256. padding: 1.8rem;
  257. box-shadow: 0 4px 16px rgba(139,69,19,0.1);
  258. }
  259. .activity h3 {
  260. margin-top: 0;
  261. color: var(--color-primary);
  262. }
  263. .activity ul {
  264. list-style: none;
  265. padding: 0;
  266. }
  267. .activity li {
  268. padding: 0.3rem 0;
  269. padding-left: 1.5rem;
  270. position: relative;
  271. }
  272. .activity li::before {
  273. content: '♪';
  274. position: absolute;
  275. left: 0;
  276. color: var(--color-secondary);
  277. }
  278. /* Impact */
  279. .impact-banner {
  280. background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  281. color: white;
  282. border-radius: 12px;
  283. padding: 2rem;
  284. margin-top: 1.5rem;
  285. text-align: center;
  286. }
  287. .impact-banner h3 {
  288. color: var(--color-cream);
  289. margin-top: 0;
  290. }
  291. /* Alianzas */
  292. .alliance-grid {
  293. display: grid;
  294. grid-template-columns: 1fr 1fr;
  295. gap: 1.5rem;
  296. margin-top: 1.5rem;
  297. }
  298. .alliance-card {
  299. background: white;
  300. border-radius: 12px;
  301. padding: 1.5rem;
  302. box-shadow: 0 4px 16px rgba(139,69,19,0.1);
  303. text-align: center;
  304. }
  305. .alliance-icon {
  306. font-size: 2.5rem;
  307. margin-bottom: 0.5rem;
  308. }
  309. /* Voluntarios stats */
  310. .stats-row {
  311. display: grid;
  312. grid-template-columns: repeat(3, 1fr);
  313. gap: 1rem;
  314. margin-top: 1.5rem;
  315. }
  316. .stat-box {
  317. background: var(--color-dark);
  318. color: var(--color-cream);
  319. border-radius: 10px;
  320. padding: 1.5rem;
  321. text-align: center;
  322. }
  323. .stat-number {
  324. font-family: 'Playfair Display', serif;
  325. font-size: 2.2rem;
  326. font-weight: 700;
  327. color: var(--color-accent);
  328. }
  329. .stat-label {
  330. font-size: 0.9rem;
  331. opacity: 0.8;
  332. }
  333. /* Contact */
  334. .contact-grid {
  335. display: grid;
  336. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  337. gap: 1rem;
  338. margin-top: 1.5rem;
  339. }
  340. .contact-item {
  341. background: white;
  342. border-radius: 8px;
  343. padding: 1.2rem;
  344. display: flex;
  345. align-items: center;
  346. gap: 0.8rem;
  347. box-shadow: 0 2px 8px rgba(139,69,19,0.08);
  348. }
  349. .contact-icon {
  350. font-size: 1.5rem;
  351. }
  352. .contact-label {
  353. font-size: 0.8rem;
  354. color: var(--color-muted);
  355. text-transform: uppercase;
  356. letter-spacing: 0.5px;
  357. }
  358. .contact-value {
  359. font-weight: 600;
  360. color: var(--color-primary);
  361. }
  362. /* Transparencia */
  363. .transparency-box {
  364. background: white;
  365. border-radius: 12px;
  366. padding: 1.8rem;
  367. box-shadow: 0 4px 16px rgba(139,69,19,0.1);
  368. border-left: 4px solid var(--color-accent);
  369. }
  370. .budget-highlight {
  371. background: var(--color-cream);
  372. border-radius: 8px;
  373. padding: 1rem;
  374. margin-top: 1rem;
  375. text-align: center;
  376. }
  377. .budget-amount {
  378. font-family: 'Playfair Display', serif;
  379. font-size: 1.8rem;
  380. color: var(--color-primary);
  381. font-weight: 700;
  382. }
  383. /* Footer */
  384. footer {
  385. background: var(--color-dark);
  386. color: var(--color-cream);
  387. text-align: center;
  388. padding: 2rem;
  389. font-size: 0.9rem;
  390. }
  391. footer .footer-title {
  392. font-family: 'Playfair Display', serif;
  393. font-size: 1.1rem;
  394. margin-bottom: 0.5rem;
  395. }
  396. /* Responsive */
  397. @media (max-width: 700px) {
  398. header h1 { font-size: 2rem; }
  399. .cards { grid-template-columns: 1fr; }
  400. .activities { grid-template-columns: 1fr; }
  401. .alliance-grid { grid-template-columns: 1fr; }
  402. .stats-row { grid-template-columns: 1fr 1fr; }
  403. section { padding: 2rem 1rem; }
  404. }
  405. </style>
  406. </head>
  407. <body>
  408. <!-- Fixed topbar with logo -->
  409. <div class="topbar">
  410. <img src="/logo.jpg" alt="Ensamble Armadillos">
  411. </div>
  412. <!-- Spacer so content starts below fixed topbar -->
  413. <div class="topbar-spacer"></div>
  414. <!-- Header -->
  415. <header>
  416. <h1>Ensamble Armadillos</h1>
  417. <p class="tagline">Sembrando Cultura, Cosechando Futuro</p>
  418. <span class="header-badge">Asociación cultural sin fines de lucro — en proceso de constitución como A.C.</span>
  419. <p style="margin-top:1rem; opacity:0.7; font-size:0.95rem;">Acapetahua, Chiapas, México</p>
  420. </header>
  421. <!-- Hero Banner -->
  422. <div style="width:100%; max-height:420px; overflow:hidden; background:#2C1810; text-align:center;">
  423. <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;">
  424. <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>
  425. </div>
  426. <!-- Navigation -->
  427. <nav>
  428. <ul>
  429. <li><a href="#mision">Misión y Visión</a></li>
  430. <li><a href="#historia">Historia</a></li>
  431. <li><a href="#actividades">Actividades</a></li>
  432. <li><a href="#linea-tiempo">Línea del Tiempo</a></li>
  433. <li><a href="#alianzas">Alianzas</a></li>
  434. <li><a href="#contacto">Contacto</a></li>
  435. </ul>
  436. </nav>
  437. <!-- Misión y Visión -->
  438. <section id="mision">
  439. <h2>Misión y Visión</h2>
  440. <div class="cards">
  441. <div class="card">
  442. <h3>Misión</h3>
  443. <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>
  444. </div>
  445. <div class="card">
  446. <h3>Visión</h3>
  447. <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>
  448. </div>
  449. </div>
  450. <h3 style="margin-top:2rem;">Valores</h3>
  451. <div class="values-grid">
  452. <div class="value-item">Identidad</div>
  453. <div class="value-item">Trabajo en equipo</div>
  454. <div class="value-item">Creatividad</div>
  455. <div class="value-item">Compromiso social</div>
  456. </div>
  457. </section>
  458. <!-- Historia -->
  459. <section id="historia">
  460. <h2>Nuestra Historia</h2>
  461. <div class="history-text">
  462. <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>
  463. <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>
  464. <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>
  465. <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>
  466. <p class="timeline-note" style="margin-top:1rem;">Próximamente: homenaje a los maestros Felipe Orozco y Humberto Velázquez.</p>
  467. </div>
  468. <div class="highlight-box">
  469. "La cultura no se hereda, se siembra."
  470. </div>
  471. </section>
  472. <!-- Actividades -->
  473. <section id="actividades">
  474. <h2>Actividades y Programas</h2>
  475. <div class="activities">
  476. <div class="activity">
  477. <h3>Festival Armadillos</h3>
  478. <p>Nuestro evento principal es el Festival Armadillos, un encuentro cultural que reúne:</p>
  479. <ul>
  480. <li>Música</li>
  481. <li>Danza</li>
  482. <li>Poesía y literatura</li>
  483. <li>Cápsulas de contenido sobre salud y prevención</li>
  484. </ul>
  485. <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>
  486. </div>
  487. <div class="activity">
  488. <h3>Impacto en la Juventud</h3>
  489. <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>
  490. <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>
  491. </div>
  492. </div>
  493. <div class="impact-banner">
  494. <h3>Impacto en la comunidad</h3>
  495. <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>
  496. </div>
  497. </section>
  498. <!-- Línea del Tiempo -->
  499. <section id="linea-tiempo">
  500. <h2>Línea del Tiempo del Festival</h2>
  501. <div class="timeline">
  502. <div class="timeline-item">
  503. <div class="timeline-year">I Festival — 2012</div>
  504. <div class="timeline-desc">Primera edición del festival</div>
  505. <div class="timeline-note">(por confirmar detalles)</div>
  506. </div>
  507. <div class="timeline-item">
  508. <div class="timeline-year">II Festival — 2013</div>
  509. <div class="timeline-desc">Segunda edición del festival</div>
  510. <div class="timeline-note">(por confirmar detalles)</div>
  511. </div>
  512. <div class="timeline-item">
  513. <div class="timeline-year">III Festival — 2014</div>
  514. <div class="timeline-desc">Tercera edición del festival</div>
  515. <div class="timeline-note">(por confirmar detalles)</div>
  516. </div>
  517. <div class="timeline-item">
  518. <div class="timeline-year">IV Festival — 2015</div>
  519. <div class="timeline-desc">Auditorio UNICACH Acapetahua</div>
  520. <div class="timeline-note">Por primera vez en estas instalaciones — punto de inflexión</div>
  521. </div>
  522. <div class="timeline-item">
  523. <div class="timeline-year">V Festival — 2017</div>
  524. <div class="timeline-desc">Auditorio UNICACH Acapetahua</div>
  525. <div class="timeline-note">Homenaje al Prof. Felipe Orozco</div>
  526. </div>
  527. <div class="timeline-item">
  528. <div class="timeline-year">VI Festival — 2018</div>
  529. <div class="timeline-desc">Auditorio UNICACH Acapetahua</div>
  530. <div class="timeline-note">(por confirmar detalles)</div>
  531. </div>
  532. <div class="timeline-item">
  533. <div class="timeline-year">VII Festival — 2019</div>
  534. <div class="timeline-desc">Auditorio UNICACH Acapetahua</div>
  535. <div class="timeline-note">Homenaje al Prof. Humberto Velázquez</div>
  536. </div>
  537. <div class="timeline-item">
  538. <div class="timeline-year">2020 – 2025</div>
  539. <div class="timeline-desc">Pausa del festival</div>
  540. <div class="timeline-note">A causa de la pandemia y circunstancias externas</div>
  541. </div>
  542. <div class="timeline-item">
  543. <div class="timeline-year">VIII Festival — Próximamente</div>
  544. <div class="timeline-desc">En preparación</div>
  545. <div class="timeline-note">¡El festival regresa con nueva energía!</div>
  546. </div>
  547. </div>
  548. </section>
  549. <!-- Alianzas y Voluntariado -->
  550. <section id="alianzas">
  551. <h2>Alianzas y Voluntariado</h2>
  552. <div class="alliance-grid">
  553. <div class="alliance-card">
  554. <div class="alliance-icon">🏛️</div>
  555. <h3>Iniciativa Privada</h3>
  556. <p>Empresas y negocios locales que creen en el poder transformador de la cultura.</p>
  557. </div>
  558. <div class="alliance-card">
  559. <div class="alliance-icon">🏢</div>
  560. <h3>Gobierno Municipal</h3>
  561. <p>Apoyo institucional para la realización de los festivales.</p>
  562. </div>
  563. </div>
  564. <h3 style="margin-top:2rem;">Voluntariado</h3>
  565. <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>
  566. <div class="stats-row">
  567. <div class="stat-box">
  568. <div class="stat-number">20+</div>
  569. <div class="stat-label">Voluntarios activos</div>
  570. </div>
  571. <div class="stat-box">
  572. <div class="stat-number">50+</div>
  573. <div class="stat-label">Voluntarios históricos</div>
  574. </div>
  575. <div class="stat-box">
  576. <div class="stat-number">100%</div>
  577. <div class="stat-label">Donaciones</div>
  578. </div>
  579. </div>
  580. </section>
  581. <!-- Transparencia -->
  582. <section id="transparencia">
  583. <h2>Transparencia</h2>
  584. <div class="transparency-box">
  585. <p><strong>Presupuesto aproximado por festival:</strong> $50,000 MXN</p>
  586. <p class="timeline-note" style="margin-top:0.3rem;">(Dato referente al año 2019 — por actualizar)</p>
  587. <div class="budget-highlight">
  588. <div class="budget-amount">$50,000 MXN</div>
  589. <div>por festival — financiado al 100% con donaciones</div>
  590. </div>
  591. <h3 style="margin-top:1.5rem;">Formas de aportación</h3>
  592. <ul style="list-style:none; padding:0;">
  593. <li style="padding:0.3rem 0;">💵 Efectivo</li>
  594. <li style="padding:0.3rem 0;">🤝 Voluntariado</li>
  595. <li style="padding:0.3rem 0;" class="timeline-note">Datos bancarios para donativos — pendientes</li>
  596. </ul>
  597. </div>
  598. </section>
  599. <!-- Contacto -->
  600. <section id="contacto">
  601. <h2>Datos de Contacto</h2>
  602. <div class="contact-grid">
  603. <div class="contact-item">
  604. <div class="contact-icon">📧</div>
  605. <div>
  606. <div class="contact-label">Correo</div>
  607. <div class="contact-value">festival@armadillos.org.mx</div>
  608. </div>
  609. </div>
  610. <div class="contact-item">
  611. <div class="contact-icon">📞</div>
  612. <div>
  613. <div class="contact-label">Teléfono</div>
  614. <div class="contact-value">918 126 1222</div>
  615. </div>
  616. </div>
  617. <div class="contact-item">
  618. <div class="contact-icon">📍</div>
  619. <div>
  620. <div class="contact-label">Ubicación</div>
  621. <div class="contact-value">Acapetahua, Chiapas, México</div>
  622. </div>
  623. </div>
  624. <div class="contact-item">
  625. <div class="contact-icon">🌐</div>
  626. <div>
  627. <div class="contact-label">Sitio web</div>
  628. <div class="contact-value">En proceso</div>
  629. </div>
  630. </div>
  631. </div>
  632. <h3 style="margin-top:2rem;">Directorio</h3>
  633. <p class="timeline-note" style="margin-top:0.5rem;">Pendiente: presidente, secretario, tesorero y vocales.</p>
  634. </section>
  635. <!-- Footer -->
  636. <footer>
  637. <div class="footer-title">Ensamble Armadillos</div>
  638. <div>Sembrando Cultura, Cosechando Futuro</div>
  639. <div style="margin-top:0.5rem; opacity:0.6;">Acapetahua, Chiapas, México</div>
  640. <div style="margin-top:0.5rem; opacity:0.5; font-size:0.8rem;">Documento institucional · 2026</div>
  641. </footer>
  642. </body>
  643. </html>