[
  {
    "path": ".editorconfig",
    "content": "root = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n"
  },
  {
    "path": ".gitignore",
    "content": "# build output\ndist/\n\n# generated types\n.astro/\n\n# dependencies\nnode_modules/\n\n# logs\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\n\n# environment variables\n.env\n.env.production\n\n# macOS-specific files\n.DS_Store\n\n# jetbrains setting folder\n.idea/\n\npackage-lock.json\nbun.lock\nbun.lockb\nyarn.lock"
  },
  {
    "path": ".prettierignore",
    "content": "# build output\ndist/\n.output/\n\n# dependencies\nnode_modules/\n\n# logs\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\n\n# environment variables\n.env\n.env.production\n\n# macOS-specific files\n.DS_Store\n\n# Astro generated files\n.astro/\n\n# Lock files\npackage-lock.json\nyarn.lock\npnpm-lock.yaml "
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"printWidth\": 100,\n  \"semi\": false,\n  \"singleQuote\": false,\n  \"tabWidth\": 2,\n  \"trailingComma\": \"es5\",\n  \"useTabs\": false,\n  \"plugins\": [\"prettier-plugin-astro\", \"prettier-plugin-tailwindcss\"],\n  \"overrides\": [\n    {\n      \"files\": \"*.astro\",\n      \"options\": {\n        \"parser\": \"astro\"\n      }\n    }\n  ]\n}\n"
  },
  {
    "path": ".vscode/css_custom_tailwind.json",
    "content": "{\n  \"version\": 4.0,\n  \"atDirectives\": [\n    {\n      \"name\": \"@theme\",\n      \"description\": \"Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints\",\n      \"references\": [\n        {\n          \"name\": \"Tailwind Documentation — Functions and directives\",\n          \"url\": \"https://tailwindcss.com/docs/functions-and-directives#theme-directive\"\n        }\n      ]\n    },\n    {\n      \"name\": \"@source\",\n      \"description\": \"Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection\",\n      \"references\": [\n        {\n          \"name\": \"Tailwind Documentation — Functions and directives\",\n          \"url\": \"https://tailwindcss.com/docs/functions-and-directives#source-directive\"\n        }\n      ]\n    },\n    {\n      \"name\": \"@utility\",\n      \"description\": \"Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`\",\n      \"references\": [\n        {\n          \"name\": \"Tailwind Documentation — Functions and directives\",\n          \"url\": \"https://tailwindcss.com/docs/functions-and-directives#utility-directive\"\n        }\n      ]\n    },\n    {\n      \"name\": \"@variant\",\n      \"description\": \"Use the `@variant` directive to apply a Tailwind variant to styles in your CSS\",\n      \"references\": [\n        {\n          \"name\": \"Tailwind Documentation — Functions and directives\",\n          \"url\": \"https://tailwindcss.com/docs/functions-and-directives#variant-directive\"\n        }\n      ]\n    },\n    {\n      \"name\": \"@custom-variant\",\n      \"description\": \"Use the `@custom-variant` directive to add a custom variant in your project\",\n      \"references\": [\n        {\n          \"name\": \"Tailwind Documentation — Functions and directives\",\n          \"url\": \"https://tailwindcss.com/docs/functions-and-directives#custom-variant-directive\"\n        }\n      ]\n    },\n    {\n      \"name\": \"@apply\",\n      \"description\": \"Use the `@apply` directive to inline any existing utility classes into your own custom CSS\",\n      \"references\": [\n        {\n          \"name\": \"Tailwind Documentation — Functions and directives\",\n          \"url\": \"https://tailwindcss.com/docs/functions-and-directives#apply-directive\"\n        }\n      ]\n    },\n    {\n      \"name\": \"@reference\",\n      \"description\": \"If you want to use `@apply` or `@variant` in the `<style>` block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context\",\n      \"references\": [\n        {\n          \"name\": \"Tailwind Documentation — Functions and directives\",\n          \"url\": \"https://tailwindcss.com/docs/functions-and-directives#reference-directive\"\n        }\n      ]\n    },\n    {\n      \"name\": \"@config\",\n      \"description\": \"Use the `@config` directive to load a legacy JavaScript-based configuration file\",\n      \"references\": [\n        {\n          \"name\": \"Tailwind Documentation — Functions and directives\",\n          \"url\": \"https://tailwindcss.com/docs/functions-and-directives#config-directive\"\n        }\n      ]\n    },\n    {\n      \"name\": \"@plugin\",\n      \"description\": \"Use the `@plugin` directive to load a legacy JavaScript-based plugin\",\n      \"references\": [\n        {\n          \"name\": \"Tailwind Documentation — Functions and directives\",\n          \"url\": \"https://tailwindcss.com/docs/functions-and-directives#plugin-directive\"\n        }\n      ]\n    }\n  ]\n}\n\n"
  },
  {
    "path": ".vscode/extensions.json",
    "content": "{\n  \"recommendations\": [\n    \"astro-build.astro-vscode\",\n    \"bradlc.vscode-tailwindcss\",\n    \"esbenp.prettier-vscode\",\n    \"editorconfig.editorconfig\"\n  ]\n}\n"
  },
  {
    "path": ".vscode/launch.json",
    "content": "{\n  \"version\": \"0.2.0\",\n  \"configurations\": [\n    {\n      \"command\": \"./node_modules/.bin/astro dev\",\n      \"name\": \"Development server\",\n      \"request\": \"launch\",\n      \"type\": \"node-terminal\"\n    }\n  ]\n}\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n  \"css.customData\": [\".vscode/css_custom_tailwind.json\"],\n  \"editor.formatOnSave\": true,\n  \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n  \"[astro]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n  },\n  \"[javascript]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n  },\n  \"[typescript]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n  },\n  \"[json]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n  },\n  \"[css]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n  },\n  \"prettier.documentSelectors\": [\"**/*.astro\"],\n  \"editor.tabSize\": 2,\n  \"editor.insertSpaces\": true\n}\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "## 🤝 Cómo Contribuir\n\nLas contribuciones son lo que hacen que la comunidad de código abierto sea un lugar increíble para aprender, inspirar y crear. ¡Cualquier contribución que hagas es **muy apreciada**!\n\nSi tienes alguna sugerencia que podría mejorar el proyecto, por favor haz un [_fork_](https://github.com/midudev/lolalolitaland.com/fork) del repositorio y crea una [_pull request_](https://github.com/midudev/lolalolitaland.com/pulls). También puedes simplemente abrir un [_issue_](https://github.com/midudev/lolalolitaland.com/issues) con la etiqueta \"enhancement\".\n\nAquí tienes una guía rápida:\n\n1. Haz un [_fork_](https://github.com/midudev/lolalolitaland.com/fork) del Proyecto\n2. Clona tu fork (`git clone https://github.com/<USERNAME>/lolalolitaland.com`)\n3. Añade el repositorio original como remoto (`git remote add upstream https://github.com/midudev/lolalolitaland.com.git`)\n4. Crea tu Rama de Funcionalidad (`git switch -c feature/CaracteristicaIncreible`)\n5. Realiza tus Cambios (`git commit -m 'Add: alguna CaracterísticaIncreible'`)\n6. Haz Push a la Rama (`git push origin feature/CaracteristicaIncreible`)\n7. Abre una [_pull request_](https://github.com/midudev/lolalolitaland.com/pulls)\n\nPor favor, consulta nuestra [guía de contribución aquí](https://github.com/midudev/lolalolitaland.com/blob/master/CONTRIBUTING.md) para saber cómo puedes empezar de la mejor manera y siguiendo [buenas prácticas](https://github.com/midudev/lolalolitaland.com/blob/main/CONTRIBUTING.md#buenas-prácticas-).\n\n### Contribuir desde Stackblitz\n\nSi quieres contribuir de una manera más sencilla, puedes iniciar este proyecto desde _Stackblitz_ usando tu cuenta de GitHub:\n\n[![Abrir en Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/midudev/lolalolitaland.com)\n\n> [!NOTE]\n>\n> Nota: antes de codificar una nueva funcionalidad ve a la\n> sección de issues y PRs del repositorio y verifica que ya no se\n> esté discutiendo sobre ese tema, o que ya otra persona no lo\n> haya realizado.\n\n### 📋 Estándares de Código\n\n#### Commits\n\nSi es posible describe tus proyectos para que los mantenedores los puedan analizar de una forma más rápida y eficiente.\n\n- `feat:` - Nuevas características\n- `fix:` - Correcciones de bugs\n- `docs:` - Cambios en documentación\n- `style:` - Cambios que no afectan el código (espacios, formato, etc)\n- `refactor:` - Refactorización del código\n- `test:` - Añadir o modificar tests\n- `chore:` - Cambios en el proceso de build o herramientas auxiliares\n\nEjemplo: `feat: add newsletter subscription component`\n\n#### Código\n\n- Utiliza en lo posible el estilo de codificación configurado\n- Nombra las variables y funciones en camelCase\n- Utiliza nombres descriptivos en variables y funciones\n- Los componentes de Astro deben ir en PascalCase\n- Comenta tu código cuando solo sea necesario\n- Sigue las reglas de ESLint configuradas en el proyecto\n\n#### CSS/TailwindCSS\n\n- Utiliza las clases de Tailwind siempre que sea posible\n- Evita CSS personalizado a menos que sea absolutamente necesario\n\n#### Pull Requests\n\n- Describe claramente los cambios realizados\n- Incluye capturas de pantalla si hay cambios visuales\n- Asegúrate de que los tests pasen\n- Referencia los issues relacionados si los hay\n- Mantén los PR pequeños y enfocados en una sola característica\n\n### For de contribuir\n\n- Todos los aportes son importantes\n- Codificación\n- Pruebas manuales o automatizadas\n- Traducciones, correcciones ortográficas\n\n### 🚫 Qué evitar\n\n- No hagas commit directamente a `main`\n- No uses `!important` en CSS\n- No dejes console.logs en el código\n- No añadas dependencias sin discutirlo primero\n- No modifiques la configuración del proyecto sin consenso\n- Evita ser grosero o imponerte en las discusiones\n\n### 👥 Proceso de Review\n\n1. Los PR necesitan al menos una aprobación\n2. Atiende los comentarios del review\n3. Asegúrate de que el CI/CD pase\n\n## Estructura del Proyecto\n\n```\n└── 📁lolalolitaland.com\n    └── 📁public <-- images, fonts, Svgs\n    └── 📁src\n        └── 📁components\n        └── 📁consts\n        └── 📁layouts\n        └── 📁pages\n        └── 📁sections\n        └── 📁styles\n```\n\n<p align=\"right\"><a href=\"#readme-top\">volver arriba ⬆️</a></p>\n"
  },
  {
    "path": "README.md",
    "content": "# 🌸 LOLA LOLITA LAND 🌸 - Sitio Web Oficial 2025\n\nEste proyecto es una iniciativa de la influencer [@lolalolita](https://www.instagram.com/lolalolita) se realiza el 15 y 16 de Junio del 2025 en Aquopolis, Madrid. Sitio web desarrollado por [midudev](https://twitch.tv/midudev), gracias a la colaboración de [@infojobs](https://www.infojobs.net/).\n\n![banner](./public/images/hero.webp)\n\n🖼️ Diseño en Figma (Pendiente...)\n\n### 📝 Licencia del Proyecto\n\nTen en cuenta que este proyecto es de código abierto y abierto a contribuciones de la comunidad pero **su licencia no permite trabajos derivados, ni gratuitos ni comerciales**. <!-- Revisa el archivo [LICENSE.md](LICENSE.md) para más información. -->\n\n### 🛠️ Tecnologías\n\n- [Astro 5](https://astro.build)\n- [TailwindCSS 4.0](https://tailwindcss.com)\n\n## 🔧 Instalación\n\nInstala las dependencias\n\n```sh\npnpm install\n```\n\nInicia el proyecto en modo desarrollo\n\n```sh\npnpm run dev\n```\n\n## 🤝 Cómo Contribuir\n\nLas contribuciones hacen que la comunidad de código abierto sea un lugar increíble para aprender, inspirarse y crear. ¡Cualquier contribución que hagas será muy apreciada! [guia de contribución✨](https://github.com/midudev/lolalolitaland.com/blob/master/CONTRIBUTING.md)\n\n¡Happy Code! 🎉\n\n## Colaboradores\n\n**¡Gracias a todos los colaboradores que han hecho posible este proyecto!**\n\n[![Contribuidores](https://contrib.rocks/image?repo=midudev/lolalolitaland.com&max=500&columns=20)](https://github.com/midudev/lolalolitaland.com/graphs/contributors)\n"
  },
  {
    "path": "astro.config.mjs",
    "content": "// @ts-check\nimport { defineConfig } from \"astro/config\"\n\nimport tailwindcss from \"@tailwindcss/vite\"\n\n// https://astro.build/config\nexport default defineConfig({\n  vite: {\n    plugins: [tailwindcss()],\n  },\n  build: {\n    inlineStylesheets: \"always\",\n  },\n})\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"lolalolitaland-com-v2\",\n  \"type\": \"module\",\n  \"version\": \"0.0.3\",\n  \"scripts\": {\n    \"dev\": \"astro dev\",\n    \"build\": \"astro build\",\n    \"preview\": \"astro preview\",\n    \"astro\": \"astro\"\n  },\n  \"dependencies\": {\n    \"@fontsource/poppins\": \"5.2.6\",\n    \"@midudev/tailwind-animations\": \"0.2.0\",\n    \"@tailwindcss/vite\": \"4.1.10\",\n    \"astro\": \"5.9.4\",\n    \"geojson\": \"0.5.0\",\n    \"leaflet\": \"1.9.4\",\n    \"sharp\": \"0.34.2\",\n    \"tailwindcss\": \"4.1.10\"\n  },\n  \"devDependencies\": {\n    \"@types/geojson\": \"7946.0.16\",\n    \"@types/leaflet\": \"1.9.18\",\n    \"prettier\": \"3.5.3\",\n    \"prettier-plugin-astro\": \"0.14.1\",\n    \"prettier-plugin-tailwindcss\": \"0.6.12\"\n  }\n}\n"
  },
  {
    "path": "public/events/event-lolalolita.ics",
    "content": "BEGIN:VCALENDAR\nVERSION:2.0\nPRODID:-//Apple Inc.//NONSGML iCal//EN\nBEGIN:VEVENT\nSUMMARY:Lola Lolita Land 🌸\nDTSTART;VALUE=DATE:20250614\nDTEND;VALUE=DATE:20250616\nDESCRIPTION:La experiencia más refrescante.\nLOCATION:Aquópolis Villanueva de la Cañada\nUID:20250614T000000Z-1234567890@yourdomain.com\nSTATUS:CONFIRMED\nTRANSP:OPAQUE\nBEGIN:VALARM\nTRIGGER:-PT15M\nDESCRIPTION:Recordatorio: Lola Lolita Land 🌸\nACTION:DISPLAY\nEND:VALARM\nEND:VEVENT\nEND:VCALENDAR\n"
  },
  {
    "path": "public/googlee0d1fc8a4713db25.html",
    "content": "google-site-verification: googlee0d1fc8a4713db25.html"
  },
  {
    "path": "pull_request_template.md",
    "content": "## ¿Qué se ha hecho en esta PR?\n\nSe ha añadido una plantilla mejorada para las Pull Requests (PR) del proyecto, con el objetivo de estandarizar y facilitar la descripción de los cambios realizados.\nEsta nueva plantilla proporciona una estructura clara y consistente para los desarrolladores al documentar sus PRs, mejorando la comunicación dentro del equipo. En esta parte se describirá lo que se ha hecho.\n\n**Arregla:** *(Indica aquí si arregla algún issue, ya sea en JIRA, GitHub u otra herramienta)*\n\n---\n\n## Tipo de cambio\n\nMarca las opciones relevantes para esta PR:\n\n- [ ] Corrección de errores (cambio no disruptivo que soluciona un problema)\n- [ ] Nueva funcionalidad (cambio no disruptivo que añade una nueva funcionalidad)\n- [ ] Cambio disruptivo (corrección o funcionalidad que causa que una funcionalidad existente no funcione como se espera)\n- [ ] Mejora de documentación\n\n---\n\n## ¿Se han realizado tests automáticos?\n\n- [ ] Sí\n- [ ] No\n\n---\n\n## ¿Cuál es el comportamiento esperado tras el cambio?\n\nPor ejemplo: \nNo afecta al comportamiento del producto final.\nEl objetivo es proporcionar una herramienta útil para los desarrolladores del equipo, mejorando la calidad de las descripciones de PR.\n\n---\n\n## ¿Cómo se pueden testear las características introducidas en esta PR?\n\nPor ejemplo: \nNo es necesario realizar pruebas, ya que el cambio únicamente afecta al archivo de plantilla de PR y no a funcionalidades del producto.\n\n---\n\n## Capturas de pantalla\n\n<!-- Si es necesario, añade capturas de pantalla u otros elementos visuales que ayuden a entender los cambios realizados -->\nNo se requieren capturas de pantalla.\n\n---\n\n## Enlaces adicionales\n\nPoner enlaces necesarios aquí, si no hay poner:\nNo hay enlaces adicionales."
  },
  {
    "path": "src/components/BackToTop.astro",
    "content": "<!-- Div para observar el scroll y mostrar/ocultar el botón -->\n<div\n  id=\"scroll-observer\"\n  class=\"pointer-events-none absolute top-[300px] left-0 h-[1px] w-[1px]\"\n  aria-hidden=\"true\"\n>\n</div>\n\n<a\n  class=\"via-theme-blue hover:to-theme-blue fixed right-8 bottom-8 z-40 flex h-12 w-12 flex-col items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-blue-500 to-blue-400 opacity-0 shadow-lg\"\n  id=\"back-to-top\"\n  href=\"#top\"\n  aria-label=\"Volver arriba\"\n>\n  <svg viewBox=\"0 0 384 512\" class=\"absolute h-5 w-4\">\n    <path\n      fill=\"#fff\"\n      d=\"M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z\"\n    ></path>\n  </svg>\n</a>\n\n<style>\n  a {\n    border: none;\n    border-radius: 50%;\n    transition: 500ms;\n    animation: shimmer 3s linear infinite;\n  }\n\n  a svg {\n    fill: white;\n    position: absolute;\n  }\n\n  a::after {\n    content: \"Volver Arriba\";\n    position: fixed;\n    transform: translateY(35px);\n    font-size: 14px;\n    transition: 500ms;\n    color: transparent;\n    user-select: none;\n  }\n\n  a:hover::after {\n    color: white;\n    mix-blend-mode: difference;\n  }\n\n  a:hover svg {\n    animation: bounce 2s infinite linear;\n  }\n\n  a::before {\n    content: \"\";\n    z-index: 10;\n    position: absolute;\n    top: -50%;\n    left: -50%;\n    width: 200%;\n    height: 200%;\n    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);\n    transform: rotate(30deg);\n    animation: shine 3s linear infinite;\n  }\n\n  @keyframes bounce {\n    0% {\n      transform: translateY(4%);\n    }\n    25% {\n      transform: translateY(-8%);\n    }\n    50% {\n      transform: translateY(4%);\n    }\n    75% {\n      transform: translateY(-8%);\n    }\n    100% {\n      transform: translateY(4%);\n    }\n  }\n\n  button:focus {\n    outline: none;\n  }\n\n  @keyframes shimmer {\n    0% {\n      background-position: 0% 0;\n    }\n    100% {\n      background-position: 200% 0;\n    }\n  }\n\n  @keyframes shine {\n    0% {\n      transform: translateX(-100%) rotate(30deg);\n    }\n    100% {\n      transform: translateX(100%) rotate(30deg);\n    }\n  }\n</style>\n\n<script>\n  if (typeof document !== \"undefined\") {\n    const manageBackToTopButton = () => {\n      const button = document.getElementById(\"back-to-top\")\n      const observerTarget = document.getElementById(\"scroll-observer\")\n\n      if (!button || !observerTarget) return\n\n      const updateButtonVisibility = (shouldShow: boolean) => {\n        requestAnimationFrame(() => {\n          if (shouldShow) {\n            button.classList.remove(\"opacity-0\")\n            button.classList.add(\"opacity-100\")\n\n            button.classList.add(\"cursor-pointer\")\n            button.classList.remove(\"cursor-default\")\n          } else {\n            button.classList.remove(\"opacity-100\")\n            button.classList.add(\"opacity-0\")\n\n            button.classList.remove(\"cursor-pointer\")\n            button.classList.add(\"cursor-default\")\n          }\n        })\n      }\n\n      const observer = new IntersectionObserver(\n        (entries) => {\n          const isScrolledDown = !entries[0].isIntersecting\n          updateButtonVisibility(isScrolledDown)\n        },\n        { threshold: 0 }\n      )\n\n      observer.observe(observerTarget)\n\n      return () => {\n        observer.disconnect()\n      }\n    }\n\n    const initialize = () => {\n      manageBackToTopButton()\n    }\n\n    if (document.readyState === \"loading\") {\n      document.addEventListener(\"DOMContentLoaded\", initialize)\n    } else {\n      initialize()\n    }\n  }\n</script>\n"
  },
  {
    "path": "src/components/BubbleBackground.astro",
    "content": "---\nconst bubbles = Array.from({ length: 30 }, (_, i) => ({\n  id: i + 1,\n  size: `${Math.random() * 30 + 10}px`,\n  left: `${Math.random() * 95}%`,\n  top: `${Math.random() * 95}%`,\n  delay: `${Math.random() * 3}s`, // Minimal delay for faster start\n  duration: `${Math.random() * 3 + 2}s`, // Super fast animations (2-5s)\n}))\n\nconst instanceId = Math.random().toString(36).substring(2, 9)\n---\n\n<style>\n  .bubble {\n    @apply absolute rounded-full bg-radial-[at_50%_75%] from-[transparent] via-[#bedbff6f] to-[transparent] to-90%;\n    bottom: -10px; /* Start slightly below the container */\n    will-change: transform, opacity;\n    opacity: 0; /* Start transparent */\n    border: 1px solid #e4e4e4;\n    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); /* Enhanced glow */\n    contain: strict;\n  }\n\n  .tickets-button {\n    background-size: 200% 100%;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .tickets-button::before {\n    content: \"\";\n    position: absolute;\n    top: -50%;\n    left: -50%;\n    width: 200%;\n    height: 200%;\n    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);\n    transform: rotate(30deg);\n    animation: shine 3s linear infinite;\n  }\n\n  @keyframes shimmer {\n    100% {\n      background-position: 200% 0;\n    }\n  }\n\n  @keyframes shine {\n    0% {\n      transform: translateX(-100%) rotate(30deg);\n    }\n    100% {\n      transform: translateX(100%) rotate(50deg);\n    }\n  }\n\n  @keyframes bubbles {\n    0% {\n      transform: translateY(0);\n      opacity: 0;\n      background-position: 0% 0;\n    }\n\n    3% {\n      /* Even faster fade in */\n      transform: translateY(-10%);\n    }\n\n    30% {\n      /* Faster midpoint */\n      transform: translateY(-100%);\n      opacity: 0.7;\n    }\n\n    70% {\n      transform: translateY(-200%);\n      opacity: 0.5;\n    }\n\n    100% {\n      transform: translateY(-300%); /* Much longer travel distance */\n      opacity: 0;\n      background-position: 200% 0;\n    }\n  }\n</style>\n\n<div class=\"ocean pointer-events-none absolute inset-0 h-full overflow-hidden\" data-id={instanceId}>\n  {\n    bubbles.map(({ size, left, duration, delay }) => (\n      <div\n        class=\"bubble tickets-button\"\n        style={`\n        width: ${size};\n        height: ${size};\n        left: ${left};\n        animation:\n          bubbles ${duration} linear infinite ${delay},\n          shimmer 3s linear infinite;\n      `}\n      />\n    ))\n  }\n</div>\n"
  },
  {
    "path": "src/components/DotBackground.astro",
    "content": "<div class=\"dot-background-container\">\n  <canvas id=\"dotCanvas\" class=\"dot-canvas\"></canvas>\n</div>\n\n<style>\n  .dot-background-container {\n    position: fixed; /* Cambiado a fixed para seguir la ventana */\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    overflow: hidden;\n    z-index: -10; /* Valor negativo para asegurar que esté detrás de todo */\n    pointer-events: none;\n  }\n\n  .dot-canvas {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none; /* Cambiado a none para que no interfiera con otros elementos */\n  }\n</style>\n\n<script>\n  class DotBackground {\n    canvas: HTMLCanvasElement\n    ctx: CanvasRenderingContext2D\n    dots: Array<{\n      x: number\n      y: number\n      color: string\n      targetColor: string\n      alpha: number\n      targetAlpha?: number\n      size: number\n    }>\n    mouse: { x: number; y: number }\n    radius: number\n    pinkColor: string\n    grayColor: string\n    dotSize: number\n    dotSpacing: number\n    animationFrameId: number | null\n\n    constructor() {\n      this.canvas = document.getElementById(\"dotCanvas\") as HTMLCanvasElement\n      this.ctx = this.canvas.getContext(\"2d\") as CanvasRenderingContext2D\n      this.dots = []\n      this.mouse = { x: 0, y: 0 }\n      this.radius = 100 // Radio de influencia del ratón reducido\n      this.pinkColor = \"#fff\"\n      this.grayColor = \"#fff\"\n      this.dotSize = 1.0 // Puntos ligeramente más pequeños\n      this.dotSpacing = 30 // Puntos más juntos\n      this.animationFrameId = null\n\n      // Inicializar todo\n      this.init()\n    }\n\n    init() {\n      this.setupCanvas()\n      this.createDots()\n      this.setupEventListeners()\n      this.animate()\n    }\n\n    setupCanvas() {\n      // Configurar el canvas para que ocupe toda la ventana visible\n      const dpr = window.devicePixelRatio || 1\n      this.canvas.width = window.innerWidth * dpr\n      this.canvas.height = window.innerHeight * dpr\n      this.ctx.scale(dpr, dpr)\n      this.canvas.style.width = `${window.innerWidth}px`\n      this.canvas.style.height = `${window.innerHeight}px`\n    }\n\n    createDots() {\n      // Crear una cuadrícula de puntos que cubra la ventana visible\n      const cols = Math.floor(window.innerWidth / this.dotSpacing)\n      const rows = Math.floor(window.innerHeight / this.dotSpacing)\n\n      for (let i = 0; i < cols; i++) {\n        for (let j = 0; j < rows; j++) {\n          const x = i * this.dotSpacing + this.dotSpacing / 2\n          const y = j * this.dotSpacing + this.dotSpacing / 2\n\n          this.dots.push({\n            x: x,\n            y: y,\n            color: this.grayColor,\n            targetColor: this.grayColor,\n            alpha: 0.2,\n            size: this.dotSize,\n          })\n        }\n      }\n    }\n\n    setupEventListeners() {\n      // Manejar eventos de ventana y mouse\n      window.addEventListener(\"resize\", this.handleResize.bind(this))\n      document.addEventListener(\"mousemove\", this.handleMouseMove.bind(this))\n      document.addEventListener(\"touchmove\", this.handleTouchMove.bind(this), { passive: true })\n    }\n\n    handleResize() {\n      // Actualizar el canvas y los puntos cuando cambia el tamaño de la ventana\n      if (this.animationFrameId !== null) {\n        cancelAnimationFrame(this.animationFrameId)\n      }\n      this.dots = []\n      this.setupCanvas()\n      this.createDots()\n      this.animate()\n    }\n\n    handleMouseMove(e: MouseEvent) {\n      // Actualizar posición del ratón relativa al canvas\n      this.mouse.x = e.clientX\n      this.mouse.y = e.clientY\n    }\n\n    handleTouchMove(e: TouchEvent) {\n      if (e.touches.length > 0) {\n        // Actualizar posición del toque relativa al canvas\n        this.mouse.x = e.touches[0].clientX\n        this.mouse.y = e.touches[0].clientY\n      }\n    }\n\n    animate() {\n      // Limpiar el canvas\n      this.ctx.clearRect(\n        0,\n        0,\n        this.canvas.width / (window.devicePixelRatio || 1),\n        this.canvas.height / (window.devicePixelRatio || 1)\n      )\n\n      // Actualizar y dibujar puntos\n      this.updateDots()\n      this.drawDots()\n\n      // Continuar la animación\n      this.animationFrameId = requestAnimationFrame(this.animate.bind(this))\n    }\n\n    updateDots() {\n      this.dots.forEach((dot) => {\n        const dx = this.mouse.x - dot.x\n        const dy = this.mouse.y - dot.y\n        const distance = Math.sqrt(dx * dx + dy * dy)\n\n        // Actualizar color objetivo basado en la distancia al ratón\n        if (distance < this.radius) {\n          // Aplicar una curva de intensidad no lineal para acentuar el centro\n          const normalizedDistance = distance / this.radius\n          // Usar una función exponencial para que la intensidad caiga más rápidamente al alejarse del centro\n          const intensity = Math.pow(1 - normalizedDistance, 2.5)\n          dot.targetColor = this.pinkColor\n\n          // Los puntos más cercanos mantienen alta intensidad, los lejanos son más sutiles\n          if (normalizedDistance < 0.3) {\n            // Puntos centrales (30% del radio) mantienen alta intensidad\n            dot.targetAlpha = 0.5 + intensity * 0.3\n          } else {\n            // Puntos exteriores tienen intensidad reducida\n            dot.targetAlpha = 0.3 + intensity * 0.2\n          }\n        } else {\n          dot.targetColor = this.grayColor\n          dot.targetAlpha = dot.alpha\n        }\n\n        // Transición suave de color\n        if (dot.color !== dot.targetColor) {\n          // Interpolación de color para transición suave\n          const currentColor = this.hexToRgb(dot.color)\n          const targetColor = this.hexToRgb(dot.targetColor)\n\n          // Velocidad de transición\n          const transitionSpeed = dot.targetColor === this.pinkColor ? 0.15 : 0.05\n\n          // Actualizar componentes RGB\n          currentColor.r += (targetColor.r - currentColor.r) * transitionSpeed\n          currentColor.g += (targetColor.g - currentColor.g) * transitionSpeed\n          currentColor.b += (targetColor.b - currentColor.b) * transitionSpeed\n\n          // Convertir de nuevo a hex\n          dot.color = this.rgbToHex(\n            Math.round(currentColor.r),\n            Math.round(currentColor.g),\n            Math.round(currentColor.b)\n          )\n        }\n      })\n    }\n\n    drawDots() {\n      this.dots.forEach((dot) => {\n        this.ctx.beginPath()\n        this.ctx.arc(dot.x, dot.y, dot.size, 0, Math.PI * 2)\n        this.ctx.fillStyle = dot.color\n        this.ctx.globalAlpha = dot.targetAlpha || dot.alpha\n        this.ctx.fill()\n      })\n    }\n\n    hexToRgb(hex: string) {\n      // Expandir formato abreviado (por ejemplo, \"#03F\") a formato completo (por ejemplo, \"#0033FF\")\n      const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i\n      hex = hex.replace(\n        shorthandRegex,\n        (m: string, r: string, g: string, b: string) => r + r + g + g + b + b\n      )\n\n      const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n      return result\n        ? {\n            r: parseInt(result[1], 16),\n            g: parseInt(result[2], 16),\n            b: parseInt(result[3], 16),\n          }\n        : { r: 0, g: 0, b: 0 }\n    }\n\n    rgbToHex(r: number, g: number, b: number) {\n      return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`\n    }\n  }\n\n  // Inicializar cuando el DOM esté completamente cargado\n  // Iniciar el efecto cuando el DOM esté completamente cargado\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\"DOMContentLoaded\", () => {\n      new DotBackground()\n    })\n  } else {\n    // Si el documento ya está cargado, iniciar inmediatamente\n    new DotBackground()\n  }\n</script>\n"
  },
  {
    "path": "src/components/Header.astro",
    "content": "---\nimport HeaderLink, { Device, Target } from \"@/components/HeaderLink.astro\"\n---\n\n<header class=\"animate-blur-header fixed top-0 z-60 w-screen\">\n  <nav\n    class=\"mx-auto flex max-w-6xl items-center justify-between px-4 py-6 pb-0 uppercase lg:px-8\"\n    aria-label=\"Global\"\n  >\n    <div class=\"flex\">\n      <div class=\"hidden lg:flex lg:gap-x-12\">\n        <HeaderLink text=\"Info\" href=\"/#info\" device={Device.DESKTOP} />\n        <HeaderLink text=\"Preguntas\" href=\"/#faq\" device={Device.DESKTOP} />\n        <HeaderLink\n          text=\"Aut. Menores\"\n          href=\"/hoja-de-responsabilidad.pdf\"\n          device={Device.DESKTOP}\n          target={Target.BLANK}\n        />\n      </div>\n      <div class=\"flex lg:hidden\">\n        <button\n          type=\"button\"\n          id=\"open-menu-button\"\n          class=\"-m-2.5 inline-flex cursor-pointer items-center justify-center rounded-md p-2.5 text-white transition-all duration-300 will-change-transform hover:scale-150\"\n        >\n          <span class=\"sr-only\">Abrir Menú Principal</span>\n          <svg\n            class=\"size-6\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            aria-hidden=\"true\"\n            data-slot=\"icon\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n\n    <div class=\"flex flex-1 justify-end\">\n      <div class=\"relative flex flex-col items-end\">\n        <span\n          id=\"tickets-button\"\n          class=\"tickets-button relative cursor-not-allowed rounded-full bg-gray-300 px-5 py-2 text-sm/6 font-bold text-gray-500 opacity-70 shadow-lg\"\n          aria-disabled=\"true\">¡Gracias por asistir!</span\n        >\n      </div>\n    </div>\n  </nav>\n  <dialog\n    class=\"bg-primary z-50 max-h-[80vh] w-full max-w-full translate-x-0 transition-discrete duration-300 lg:hidden starting:-translate-x-full [&:not([open])]:-translate-x-full\"\n    id=\"mobile-menu\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n  >\n    <div class=\"z-10 overflow-y-auto px-6 py-6\">\n      <div class=\"flex items-center justify-between\">\n        <div class=\"flex flex-1\">\n          <button\n            type=\"button\"\n            id=\"close-menu-button\"\n            class=\"-m-2.5 cursor-pointer p-2.5 text-white transition-all duration-300 ease-in will-change-transform hover:scale-150\"\n          >\n            <span class=\"sr-only\">Cerrar Menú</span>\n            <svg\n              class=\"size-6\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              aria-hidden=\"true\"\n              data-slot=\"icon\"\n            >\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n            </svg>\n          </button>\n        </div>\n      </div>\n      <div class=\"mt-6 space-y-2\">\n        <HeaderLink text=\"Info\" href=\"/#info\" device={Device.MOBILE} />\n        <HeaderLink text=\"Preguntas\" href=\"/#faq\" device={Device.MOBILE} />\n        <HeaderLink\n          text=\"Aut. Menores\"\n          href=\"/hoja-de-responsabilidad.pdf\"\n          device={Device.MOBILE}\n          target={Target.BLANK}\n        />\n        <span\n          class=\"block w-full cursor-not-allowed rounded-full bg-gray-300 px-5 py-2 text-center font-bold text-gray-500 opacity-70\"\n          aria-disabled=\"true\">¡Gracias por asistir!</span\n        >\n      </div>\n    </div>\n  </dialog>\n</header>\n\n<div id=\"backdrop\"></div>\n\n<div data-target class=\"absolute top-[150px]\"></div>\n\n<script>\n  // Get the menu elements\n  const mobileMenu = document.getElementById(\"mobile-menu\") as HTMLDialogElement\n  const openMenuButton = document.getElementById(\"open-menu-button\")\n  const closeMenuButton = document.getElementById(\"close-menu-button\")\n  const mobileItems = mobileMenu.querySelectorAll(\"a\")\n  const backdrop = document.getElementById(\"backdrop\")\n\n  const toggleMenu = () => {\n    mobileMenu.open ? mobileMenu.close() : mobileMenu.showModal()\n\n    if (mobileMenu.open) {\n      backdrop?.classList.add(\"visible\")\n    } else {\n      backdrop?.classList.remove(\"visible\")\n    }\n  }\n\n  // Add event listener to open menu button\n  openMenuButton?.addEventListener(\"click\", toggleMenu)\n\n  // Add event listener to close menu button\n  closeMenuButton?.addEventListener(\"click\", toggleMenu)\n\n  document.addEventListener(\"click\", (event) => {\n    const isClickInsideMenu = mobileMenu.contains(event.target as Node)\n    const isClickInsideButton = openMenuButton?.contains(event.target as Node)\n\n    if (isClickInsideMenu && !isClickInsideButton) {\n      mobileMenu.close()\n      backdrop?.classList.remove(\"visible\")\n    }\n  })\n\n  mobileItems?.forEach((item) => item.addEventListener(\"click\", toggleMenu))\n\n  const target = document.querySelector(\"[data-target]\")\n  const header = document.querySelector(\"header\")\n  const ticketsButton = document.getElementById(\"tickets-button\")\n\n  const handleIntersection = ([entry]: IntersectionObserverEntry[]) => {\n    if (entry.isIntersecting) {\n      ticketsButton?.classList.add(\n        \"from-[#ff0695]\",\n        \"via-[#ff99d1]\",\n        \"to-[#ff0695]\",\n        \"shadow-[#ff0695]/30\",\n        \"hover:shadow-[#ff0695]/40\"\n      )\n      ticketsButton?.classList.remove(\n        \"from-[#383acf]\",\n        \"via-[#8688ff]\",\n        \"to-[#383acf]\",\n        \"shadow-[#383acf]/30\",\n        \"hover:shadow-[#383acf]/40\"\n      )\n      header?.classList.remove(\"end-state\")\n    } else {\n      ticketsButton?.classList.remove(\n        \"from-[#ff0695]\",\n        \"via-[#ff99d1]\",\n        \"to-[#ff0695]\",\n        \"shadow-[#ff0695]/30\",\n        \"hover:shadow-[#ff0695]/40\"\n      )\n      ticketsButton?.classList.add(\n        \"from-[#383acf]\",\n        \"via-[#8688ff]\",\n        \"to-[#383acf]\",\n        \"shadow-[#383acf]/30\",\n        \"hover:shadow-[#383acf]/40\"\n      )\n      header?.classList.add(\"end-state\")\n    }\n  }\n\n  const createObserver = (target: Element, callback: IntersectionObserverCallback) => {\n    const observer = new IntersectionObserver(callback, { threshold: 0.5 })\n    observer.observe(target)\n  }\n\n  if (target) {\n    createObserver(target, handleIntersection)\n  }\n</script>\n\n<style>\n  @reference \"../styles/global.css\";\n\n  header {\n    @apply border-b border-b-transparent;\n    transition:\n      background 0.3s,\n      padding-bottom 0.2s,\n      border-bottom-color 0.1s;\n  }\n\n  .end-state {\n    @apply bg-primary/60 border-b-[#b50066] pb-6 backdrop-blur-md;\n  }\n\n  #backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    background-color: rgba(0, 0, 0, 0.5);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.3s ease-in-out;\n    z-index: 100;\n  }\n\n  .tickets-button {\n    background-size: 200% 100%;\n    animation: shimmer 3s linear infinite;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .tickets-button::before {\n    content: \"\";\n    position: absolute;\n    top: -50%;\n    left: -50%;\n    width: 200%;\n    height: 200%;\n    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);\n    transform: rotate(30deg);\n    animation: shine 3s linear infinite;\n  }\n\n  @keyframes shimmer {\n    0% {\n      background-position: 0% 0;\n    }\n    100% {\n      background-position: 200% 0;\n    }\n  }\n\n  @keyframes shine {\n    0% {\n      transform: translateX(-100%) rotate(30deg);\n    }\n    100% {\n      transform: translateX(100%) rotate(30deg);\n    }\n  }\n\n  #backdrop.visible {\n    opacity: 1;\n  }\n\n  dialog::backdrop {\n    display: none;\n  }\n</style>\n"
  },
  {
    "path": "src/components/HeaderLink.astro",
    "content": "---\nexport enum Device {\n  MOBILE = \"MOBILE\",\n  DESKTOP = \"DESKTOP\",\n}\n\nexport enum Target {\n  BLANK = \"_blank\",\n  SELF = \"_self\",\n  PARENT = \"_parent\",\n  TOP = \"_top\",\n}\n\nexport type Props = {\n  href: string\n  text: string\n  device: Device\n  target?: Target\n  extraClasses?: string\n}\nconst { href, text, device, target, extraClasses } = Astro.props\n\nconst desktopClasses =\n  \"relative text-sm/6 font-semibold text-white after:absolute after:bottom-[-2px] after:left-0 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:w-full\"\n\nconst mobileClasses =\n  \"hover:text-primary-light border-primary-light -mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white\"\n---\n\n<a\n  href={href}\n  class:list={[device === Device.DESKTOP ? desktopClasses : mobileClasses, extraClasses]}\n  target={target}>{text}</a\n>\n"
  },
  {
    "path": "src/components/LeafletMap.astro",
    "content": "---\n// Leaflet CSS and dependencies will be loaded dynamically\nimport type { FeatureCollection, Geometry, GeoJsonProperties } from \"geojson\"\n\nexport interface Props {\n  latitude: number\n  longitude: number\n  zoom: number\n  /** URL del tileLayer, ver: https://leafletjs.com/reference.html#tilelayer */\n  tileLayer: string\n  /** Atribución requerida por la mayoría de tile servers */\n  attribution: string\n  geoJSON?: { data: FeatureCollection<Geometry, GeoJsonProperties>; color: string }[]\n}\n\nconst { latitude, longitude, zoom, tileLayer, attribution, geoJSON } = Astro.props\n---\n\n<leaflet-map\n  class=\"block h-full\"\n  data-latitude={latitude}\n  data-longitude={longitude}\n  data-zoom={zoom}\n  data-tiles={tileLayer}\n  data-attribution={attribution}\n  data-geojson={JSON.stringify(geoJSON)}\n>\n</leaflet-map>\n\n<script>\n  class LeafletMap extends HTMLElement {\n    private observer: IntersectionObserver | null = null\n    private initialized = false\n\n    connectedCallback() {\n      // Create an intersection observer to detect when the map is about to be visible\n      this.observer = new IntersectionObserver(this.handleIntersection.bind(this), {\n        rootMargin: \"200px\", // Load when map is within 200px of viewport\n        threshold: 0,\n      })\n\n      this.observer.observe(this)\n    }\n\n    disconnectedCallback() {\n      // Clean up the observer when the element is removed from the DOM\n      if (this.observer) {\n        this.observer.disconnect()\n        this.observer = null\n      }\n    }\n\n    async handleIntersection(entries: IntersectionObserverEntry[]) {\n      const isIntersecting = entries[0]?.isIntersecting\n\n      if (isIntersecting && !this.initialized) {\n        this.initialized = true\n\n        // Stop observing once we've initialized\n        if (this.observer) {\n          this.observer.disconnect()\n          this.observer = null\n        }\n\n        // Dynamically load Leaflet CSS\n        await this.loadLeafletCSS()\n\n        // Dynamically import Leaflet\n        const leafletModule = await import(\"leaflet\")\n        const L = leafletModule.default\n\n        // Initialize the map\n        await this.initializeMap(L)\n      }\n    }\n\n    async loadLeafletCSS() {\n      return new Promise<void>((resolve) => {\n        const link = document.createElement(\"link\")\n        link.rel = \"stylesheet\"\n        link.href = \"https://unpkg.com/leaflet@1.9.4/dist/leaflet.css\"\n        link.integrity = \"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=\"\n        link.crossOrigin = \"\"\n\n        link.onload = () => {\n          // Add custom CSS for the pink color theme after Leaflet CSS is loaded\n          this.addCustomStyles()\n          resolve()\n        }\n        document.head.appendChild(link)\n      })\n    }\n\n    addCustomStyles() {\n      // Add the custom CSS for the pink color theme\n      const style = document.createElement(\"style\")\n      style.textContent = `\n        .leaflet-tile {\n          filter: hue-rotate(220deg);\n        }\n\n        .leaflet-pane {\n          z-index: 10;\n        }\n\n        .leaflet-top {\n          z-index: 11;\n        }\n\n        .leaflet-control-zoom.leaflet-bar.leaflet-control {\n          border-radius: 24px;\n          overflow: hidden;\n          margin: 14px;\n          border-color: var(--color-primary);\n        }\n\n        a.leaflet-control-zoom-in,\n        a.leaflet-control-zoom-out {\n          background-color: var(--color-primary-light);\n          color: var(--color-primary);\n          border-color: var(--color-primary);\n        }\n\n        a.leaflet-control-zoom-in:hover,\n        a.leaflet-control-zoom-out:hover {\n          background-color: var(--color-primary);\n          color: white;\n          border-color: var(--color-primary-light);\n        }\n      `\n      document.head.appendChild(style)\n    }\n\n    async initializeMap(L: any) {\n      const { latitude, longitude, zoom, tiles, attribution, geojson } = this.dataset\n      const latlng = [Number(latitude), Number(longitude)]\n\n      const map = L.map(this, {\n        scrollWheelZoom: false,\n        dragging: false,\n        attributionControl: true,\n      }).setView(latlng, Number(zoom))\n\n      // Habilitar interactividad al hacer clic\n      map.once(\"click\", () => {\n        map.scrollWheelZoom.enable()\n        map.dragging.enable()\n      })\n\n      L.tileLayer(tiles as string, { attribution }).addTo(map)\n\n      // Definir icono personalizado\n      const myIcon = L.icon({\n        iconUrl: \"images/icons/marker.webp\",\n        iconSize: [25, 36],\n        iconAnchor: [12, 41],\n        popupAnchor: [1, -34],\n        shadowSize: [41, 41],\n      })\n\n      L.marker(latlng, { icon: myIcon }).addTo(map).bindPopup(\"Aquopolis Villanueva de la Cañada\")\n\n      if (!geojson) return\n\n      const geoJSONData = JSON.parse(geojson as string)\n      geoJSONData.forEach(({ data, color }: { data: any; color: string }) => {\n        L.geoJSON(data, {\n          style: { color, weight: 5, opacity: 0.65 },\n        }).addTo(map)\n      })\n    }\n  }\n\n  window.customElements.define(\"leaflet-map\", LeafletMap)\n</script>\n\n<!-- Styles are now added dynamically in JavaScript -->\n"
  },
  {
    "path": "src/components/Marquee.astro",
    "content": "---\nexport type Props = {\n  content: Array<string>\n}\n\nconst { content } = Astro.props\n---\n\n<div class=\"flex mt-10 gap-x-4 overflow-hidden py-4 md:py-6 lg:py-8\">\n  {\n    content.map((item, index) => (\n      <div class=\"marquee-content animate-marquee flex flex-none justify-around gap-x-4 [&>*]:leading-none [&>*]:font-black [&>*]:uppercase\">\n        <div class=\"text-[5vh] text-[#6c4bbc] md:text-[6vh] lg:text-[4vw]\">{item}</div>\n        {index !== content.length - 1 && (\n          <div class=\"text-[5vh] text-[#6c4bbc] md:text-[6vh] lg:text-[4vw]\"> · </div>\n        )}\n      </div>\n    ))\n  }\n</div>\n"
  },
  {
    "path": "src/components/Sponsor.astro",
    "content": "---\nconst { href } = Astro.props\n---\n\n<a\n  href={href}\n  target=\"_blank\"\n  rel=\"noopener noreferrer\"\n  class=\"group relative flex max-h-12 grow-0 items-center justify-center bg-transparent object-contain p-1 lg:col-span-1\"\n>\n  <slot />\n  <div\n    class=\"animate-shiny pointer-events-none absolute inset-0 h-full w-full bg-[linear-gradient(110deg,transparent_0%,transparent_43%,rgba(255,255,255,0.3)_50%,transparent_57%,transparent_100%)] bg-[length:200%_100%]\"\n  >\n  </div>\n</a>\n"
  },
  {
    "path": "src/components/SponsorsBar.astro",
    "content": "---\nimport Sponsor from \"@/components/Sponsor.astro\"\nimport Cerave from \"@/assets/cerave.svg\"\nimport Dkny from \"@/assets/dkny.webp\"\nimport Donettes from \"@/assets/donettes.svg\"\nimport InfoJobs from \"@/assets/infojobs.svg\"\nimport Trolli from \"@/assets/trolli.svg\"\nimport Grefusa from \"@/assets/grefusa.webp\"\nimport Snacking from \"@/assets/snacking.svg\"\nimport Novotel from \"@/assets/novotel.webp\"\nimport Flamingueo from \"@/assets/flamingueo.webp\"\nimport LOreal from \"@/assets/loreal.webp\"\nimport Uber from \"@/assets/uber.webp\"\nimport { Image } from \"astro:assets\"\n---\n\n<!-- Floating sponsor logos section -->\n<div\n  class=\"to-primary relative -mt-16 w-full overflow-hidden bg-gradient-to-b from-[#ff0695] py-4 text-center\"\n>\n  <div class=\"container mx-auto px-4\">\n    <!-- Sponsors container with floating animation -->\n    <div class=\"animate-float-1 relative z-10 mx-auto flex justify-center\">\n      <div\n        class=\"inline-flex flex-wrap items-center justify-center gap-x-4 gap-y-4 whitespace-nowrap\"\n      >\n        <!-- Official Sponsors -->\n        <div class=\"flex flex-col items-center rounded-[2rem] bg-white px-5 py-3 shadow-lg\">\n          <h3 class=\"text-primary-dark mb-2 text-xs font-semibold\">Patrocinadores oficiales</h3>\n          <div class=\"flex flex-wrap items-center justify-center gap-2\">\n            <Sponsor href=\"https://www.infojobs.net/\" isOfficial>\n              <InfoJobs\n                title=\"InfoJobs\"\n                width=\"90\"\n                height=\"27\"\n                class=\"inline-block transition-transform group-hover:scale-110\"\n              />\n            </Sponsor>\n            <Sponsor href=\"https://www.cerave.es/\" isOfficial>\n              <Cerave\n                title=\"Cerave\"\n                width=\"90\"\n                height=\"27\"\n                class=\"inline-block transition-transform group-hover:scale-110\"\n              />\n            </Sponsor>\n            <Sponsor href=\"https://www.dkny.com/\" isOfficial>\n              <Image\n                src={Dkny}\n                alt=\"DKNY\"\n                title=\"DKNY\"\n                width=\"500\"\n                height=\"122\"\n                class=\"inline-block w-22 transition-transform group-hover:scale-110\"\n              />\n            </Sponsor>\n            <Sponsor href=\"https://www.campofrio.es/marcas/snackin\">\n              <Image\n                src={Snacking}\n                title=\"Snacking\"\n                alt=\"Snacking\"\n                class=\"inline-block h-auto w-20 rounded bg-[#6a3f6e] px-2 transition-transform group-hover:scale-110\"\n              />\n            </Sponsor>\n            <Sponsor href=\"https://grefusa.com/\" isOfficial>\n              <Image\n                src={Grefusa}\n                alt=\"Grefusa\"\n                title=\"Grefusa\"\n                width=\"90\"\n                height=\"27\"\n                class=\"inline-block w-14 transition-transform group-hover:scale-110\"\n              />\n            </Sponsor>\n          </div>\n        </div>\n\n        <!-- Collaborators -->\n        <div class=\"flex flex-col items-center rounded-[2rem] bg-white px-5 py-3 shadow-lg\">\n          <h3 class=\"text-primary-dark mb-2 text-xs font-semibold\">Colaboradores</h3>\n          <div class=\"flex items-center gap-6\">\n            <Sponsor href=\"https://www.loreal.com/es-es/espana/\">\n              <Image\n                src={LOreal}\n                title=\"Loreal\"\n                alt=\"Loreal\"\n                class=\"inline-block w-24 transition-transform group-hover:scale-110\"\n              />\n            </Sponsor>\n            <Sponsor href=\"https://www.donettes.com/\">\n              <Image\n                src={Donettes}\n                title=\"Donettes\"\n                alt=\"Donettes\"\n                width=\"90\"\n                height=\"27\"\n                class=\"inline-block transition-transform group-hover:scale-110\"\n              />\n            </Sponsor>\n            <Sponsor href=\"https://trolli.es/\">\n              <Image\n                src={Trolli}\n                title=\"Trolli\"\n                alt=\"Trolli\"\n                width=\"90\"\n                height=\"27\"\n                class=\"inline-block w-16 transition-transform group-hover:scale-110\"\n              />\n            </Sponsor>\n            <Sponsor href=\"https://flamingueo.com/\">\n              <Image\n                src={Flamingueo}\n                title=\"Flamingueo\"\n                alt=\"Flamingueo\"\n                class=\"inline-block w-16 invert transition-transform group-hover:scale-110\"\n              />\n            </Sponsor>\n            <Sponsor\n              href=\"https://all.accor.com/lien_externe.svlt?goto=rech_resa&destination=9298&sourceid=CONCBW&dayIn=13&monthIn=06&yearIn=2025&nightNb=3&preferredCode=CONCBW&merchantid=par-accorFR\"\n            >\n              <Image\n                src={Novotel}\n                title=\"Novotel\"\n                alt=\"Novotel\"\n                class=\"inline-block h-auto w-20 rounded transition-transform group-hover:scale-110\"\n              />\n            </Sponsor>\n            <Sponsor href=\"https://www.uber.com/es/es-es/ride/?utm_source=LolaLolitaLand\">\n              <Image\n                src={Uber}\n                title=\"Uber\"\n                alt=\"Uber\"\n                class=\"-mt-2 inline-block w-20 transition-transform group-hover:scale-110\"\n              />\n            </Sponsor>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Decorative bubbles -->\n    <div class=\"bubble bubble-1\"></div>\n    <div class=\"bubble bubble-2\"></div>\n    <div class=\"bubble bubble-3\"></div>\n    <div class=\"bubble bubble-4\"></div>\n    <div class=\"bubble bubble-5\"></div>\n  </div>\n</div>\n\n<style>\n  /* Floating animations for sponsor logos */\n  @keyframes float-1 {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(-10px);\n    }\n  }\n\n  @keyframes float-2 {\n    0% {\n      transform: translateY(-5px);\n    }\n    50% {\n      transform: translateY(5px);\n    }\n    100% {\n      transform: translateY(-5px);\n    }\n  }\n\n  .animate-float-1 {\n    animation: float-1 6s ease-in-out infinite;\n  }\n\n  .animate-float-2 {\n    animation: float-2 7s ease-in-out infinite;\n  }\n\n  /* Bubble animations */\n  .bubble {\n    position: absolute;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, 0.1);\n    animation: bubble-rise linear infinite;\n  }\n\n  .bubble-1 {\n    width: 40px;\n    height: 40px;\n    left: 10%;\n    bottom: -20px;\n    animation-duration: 8s;\n  }\n\n  .bubble-2 {\n    width: 20px;\n    height: 20px;\n    left: 20%;\n    bottom: -10px;\n    animation-duration: 5s;\n    animation-delay: 1s;\n  }\n\n  .bubble-3 {\n    width: 30px;\n    height: 30px;\n    left: 60%;\n    bottom: -15px;\n    animation-duration: 7s;\n    animation-delay: 2s;\n  }\n\n  .bubble-4 {\n    width: 15px;\n    height: 15px;\n    left: 80%;\n    bottom: -8px;\n    animation-duration: 6s;\n    animation-delay: 3s;\n  }\n\n  .bubble-5 {\n    width: 25px;\n    height: 25px;\n    left: 40%;\n    bottom: -12px;\n    animation-duration: 9s;\n    animation-delay: 4s;\n  }\n\n  @keyframes bubble-rise {\n    0% {\n      transform: translateY(0) scale(1);\n      opacity: 0;\n    }\n    20% {\n      opacity: 0.8;\n    }\n    100% {\n      transform: translateY(-100vh) scale(1.5);\n      opacity: 0;\n    }\n  }\n</style>\n"
  },
  {
    "path": "src/components/StarryBackground.astro",
    "content": "---\nconst starCount = 120\nconst minDistance = 5\n\n// Función para calcular la distancia entre dos puntos\nconst getDistance = (x1: number, y1: number, x2: number, y2: number) => {\n  return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)\n}\n\nconst stars: any[] = []\n\nwhile (stars.length < starCount) {\n  const newStar = {\n    top: Math.random() * 95,\n    left: Math.random() * 100,\n    size: Math.random() * 6 + 10, // Tamaño entre 10 y 16 px\n    opacity: Math.random() * 0.2 + 0.5, // Opacidad entre 0.5 y 1\n    rotation: Math.random() * 360, // Rotación entre 0 y 360 grados\n  }\n\n  // Verificar que la nueva estrella no esté demasiado cerca de otra\n  if (\n    stars.every(\n      (star) => getDistance(star.left, star.top, newStar.left, newStar.top) >= minDistance\n    )\n  ) {\n    stars.push(newStar)\n  }\n}\n---\n\n<div class=\"pointer-events-none absolute inset-0 overflow-hidden\">\n  {\n    stars.map((star, index) => (\n      <div\n        class=\"bg-primary-light absolute animate-pulse shadow-[0_0_6px_rgba(255,182,193,0.8)]\"\n        style={`top: ${star.top}%; left: ${star.left}%; width: ${star.size}px; height: ${star.size}px; opacity: ${star.opacity}; transform: rotate(${star.rotation}deg); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);`}\n      />\n    ))\n  }\n</div>\n"
  },
  {
    "path": "src/components/WaveSeparator.astro",
    "content": "---\nconst { bottomColor = \"#ff0695\", hasBubbles = false } = Astro.props\n---\n\n<div\n  class={`wave-container ${hasBubbles ? \"wave-bubbles\" : \"\"}`}\n  style={`--bottom-color: ${bottomColor};`}\n>\n  <style>\n    .wave-container {\n      position: relative;\n    }\n\n    .wave-container::before {\n      content: \"\";\n      width: 100%;\n      height: 15px;\n      position: absolute;\n      bottom: -0.3%;\n      left: 0;\n      background-color: var(--bottom-color);\n      mask-image: url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 98L50 92C100 86 200 74 300 50C400 26 500 -10 600 2C700 14 800 74 900 98C1000 122 1100 110 1150 104L1200 98V134H1150C1100 134 1000 134 900 134C800 134 700 134 600 134C500 134 400 134 300 134C200 134 100 134 50 134H0V98Z' fill='black'/></svg>\");\n      animation: wave 17s linear infinite;\n      box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.1);\n    }\n\n    .wave-container.wave-bubbles::before {\n      z-index: 1;\n      bottom: -15px;\n      mask-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.0830269 1200 112.4'><path d='M 0 98 L 50 92 C 100 86 200 74 300 50 S 512 -9 600 2 S 800 74 900 98 S 1100 110 1150 104 L 1200 98 V 0 H 1154 H 0 V 98 Z' fill='black'/></svg>\");\n    }\n\n    @keyframes wave {\n      0% {\n        mask-position: 100% 0;\n      }\n      100% {\n        mask-position: 0% 0;\n      }\n    }\n\n    @media (max-width: 850px) {\n      .wave-container::before {\n        height: 7.5px;\n      }\n      .wave-container.wave-bubbles::before {\n        bottom: -7.5px;\n      }\n    }\n  </style>\n</div>\n"
  },
  {
    "path": "src/consts/galleryImages.ts",
    "content": "import GalleryImg1 from \"@/assets/images/gallery/gallery_01.webp\"\nimport GalleryImg2 from \"@/assets/images/gallery/gallery_02.webp\"\nimport GalleryImg3 from \"@/assets/images/gallery/gallery_03.webp\"\nimport GalleryImg5 from \"@/assets/images/gallery/gallery_05.webp\"\nimport GalleryImg6 from \"@/assets/images/gallery/gallery_06.webp\"\nimport GalleryImg7 from \"@/assets/images/gallery/gallery_07.webp\"\nimport GalleryImg8 from \"@/assets/images/gallery/gallery_08.webp\"\nimport GalleryImg9 from \"@/assets/images/gallery/gallery_09.webp\"\nimport GalleryImg10 from \"@/assets/images/gallery/gallery_10.webp\"\nimport GalleryImg11 from \"@/assets/images/gallery/gallery_11.webp\"\nimport GalleryImg12 from \"@/assets/images/gallery/gallery_12.webp\"\nimport GalleryImg13 from \"@/assets/images/gallery/gallery_13.webp\"\nimport GalleryImg14 from \"@/assets/images/gallery/gallery_14.webp\"\nimport GalleryImg15 from \"@/assets/images/gallery/gallery_15.webp\"\nimport GalleryImg16 from \"@/assets/images/gallery/gallery_16.webp\"\nimport GalleryImg17 from \"@/assets/images/gallery/gallery_17.webp\"\nimport GalleryImg18 from \"@/assets/images/gallery/gallery_18.webp\"\nimport GalleryImg19 from \"@/assets/images/gallery/gallery_19.webp\"\nimport GalleryImg20 from \"@/assets/images/gallery/gallery_20.webp\"\nimport GalleryImg21 from \"@/assets/images/gallery/gallery_21.webp\"\nimport GalleryImg22 from \"@/assets/images/gallery/gallery_22.webp\"\nimport GalleryImg23 from \"@/assets/images/gallery/gallery_23.webp\"\nimport GalleryImg24 from \"@/assets/images/gallery/gallery_24.webp\"\nimport GalleryImg25 from \"@/assets/images/gallery/gallery_25.webp\"\nimport GalleryImg26 from \"@/assets/images/gallery/gallery_26.webp\"\nimport GalleryImg27 from \"@/assets/images/gallery/gallery_27.webp\"\nimport GalleryImg28 from \"@/assets/images/gallery/gallery_28.webp\"\nimport GalleryImg29 from \"@/assets/images/gallery/gallery_29.webp\"\nimport GalleryImg30 from \"@/assets/images/gallery/gallery_30.webp\"\nimport GalleryImg31 from \"@/assets/images/gallery/gallery_31.webp\"\nimport GalleryImg32 from \"@/assets/images/gallery/gallery_32.webp\"\nimport GalleryImg33 from \"@/assets/images/gallery/gallery_33.webp\"\nimport GalleryImg34 from \"@/assets/images/gallery/gallery_34.webp\"\nimport GalleryImg35 from \"@/assets/images/gallery/gallery_35.webp\"\nimport GalleryImg36 from \"@/assets/images/gallery/gallery_36.webp\"\nimport GalleryImg37 from \"@/assets/images/gallery/gallery_37.webp\"\n\nexport const galleryImages = [\n  {\n    image: GalleryImg1,\n    alt: \"Lola Lolita en un escenario con Carlos Baute.\",\n    thumb: \"thumb1\",\n  },\n  {\n    image: GalleryImg2,\n    alt: \"Lola Lolita Land, festival de música.\",\n    thumb: \"thumb2\",\n  },\n  {\n    image: GalleryImg3,\n    alt: \"Lola Índigo en un escenario en el festival de Lola Lolita Land.\",\n    thumb: \"thumb3\",\n  },\n  {\n    image: GalleryImg5,\n    alt: \"Lola Lolita junto a un grupo de bailarines.\",\n    thumb: \"thumb4\",\n  },\n  {\n    image: GalleryImg6,\n    alt: \"Lola Lolita junto a un grupo de bailarines.\",\n    thumb: \"thumb5\",\n  },\n  {\n    image: GalleryImg7,\n    alt: \"Lola Lolita junto a un grupo de bailarines.\",\n    thumb: \"thumb6\",\n  },\n  {\n    image: GalleryImg8,\n    alt: \"Lola Lolita junto a un grupo de bailarines.\",\n    thumb: \"thumb7\",\n  },\n  {\n    image: GalleryImg9,\n    alt: \"Lola Lolita junto a un grupo de bailarines.\",\n    thumb: \"thumb8\",\n  },\n  {\n    image: GalleryImg10,\n    alt: \"Lola Lolita junto a un grupo de bailarines.\",\n    thumb: \"thumb9\",\n  },\n  {\n    image: GalleryImg11,\n    alt: \"Marina Reche en el evento de Lola Lolita Land.\",\n    thumb: \"thumb10\",\n  },\n  {\n    image: GalleryImg12,\n    alt: \"Marina Reche en el evento de Lola Lolita Land.\",\n    thumb: \"thumb11\",\n  },\n  {\n    image: GalleryImg13,\n    alt: \"DJ en el evento de Lola Lolita Land.\",\n    thumb: \"thumb12\",\n  },\n  {\n    image: GalleryImg14,\n    alt: \"DJ en el evento de Lola Lolita Land.\",\n    thumb: \"thumb13\",\n  },\n  {\n    image: GalleryImg15,\n    alt: \"Grupo de personas con tambores sobre un escenario.\",\n    thumb: \"thumb14\",\n  },\n  {\n    image: GalleryImg16,\n    alt: \"Grupo de personas con tambores sobre un escenario.\",\n    thumb: \"thumb15\",\n  },\n  {\n    image: GalleryImg17,\n    alt: \"Gente mirando hacia el escenario.\",\n    thumb: \"thumb16\",\n  },\n  {\n    image: GalleryImg18,\n    alt: \"Gente mirando hacia el escenario.\",\n    thumb: \"thumb17\",\n  },\n  {\n    image: GalleryImg19,\n    alt: \"Lola Lolita en un escenario cantando.\",\n    thumb: \"thumb18\",\n  },\n  {\n    image: GalleryImg20,\n    alt: \"Lola Lolita en un escenario bailando.\",\n    thumb: \"thumb19\",\n  },\n  {\n    image: GalleryImg21,\n    alt: \"Lola Lolita en un escenario bailando junto a Abraham Mateo cantando.\",\n    thumb: \"thumb20\",\n  },\n  {\n    image: GalleryImg22,\n    alt: \"Dos personas lanzando regalos al público.\",\n    thumb: \"thumb21\",\n  },\n  {\n    image: GalleryImg23,\n    alt: \"Lola Lolita dándose un abrazo con sus fans.\",\n    thumb: \"thumb22\",\n  },\n  { image: GalleryImg24, alt: \"DJ en el evento.\", thumb: \"thumb23\" },\n  {\n    image: GalleryImg25,\n    alt: \"Gente de fiesta en el evento de Lola Lolita.\",\n    thumb: \"thumb24\",\n  },\n  {\n    image: GalleryImg26,\n    alt: \"Lola Lolita saliendo de una caja sorpresa.\",\n    thumb: \"thumb25\",\n  },\n  {\n    image: GalleryImg27,\n    alt: \"Gente sobre el escenario bailando y rapeando.\",\n    thumb: \"thumb26\",\n  },\n  {\n    image: GalleryImg28,\n    alt: \"Lola Lolita cantando y bailando junto a otras personas.\",\n    thumb: \"thumb27\",\n  },\n  { image: GalleryImg29, alt: \"Lola Lolita Land.\", thumb: \"thumb28\" },\n  {\n    image: GalleryImg30,\n    alt: \"Lola Lolita cantando sobre un escenario con un traje azul.\",\n    thumb: \"thumb29\",\n  },\n  {\n    image: GalleryImg31,\n    alt: \"Lola Lolita celebrando junto a Carlos Baute.\",\n    thumb: \"thumb30\",\n  },\n  {\n    image: GalleryImg32,\n    alt: \"Lola Lolita tomándose una foto con un grupo de personas.\",\n    thumb: \"thumb31\",\n  },\n  {\n    image: GalleryImg33,\n    alt: \"Lola Índigo y otras dos chicas cantando y bailando sobre el escenario.\",\n    thumb: \"thumb32\",\n  },\n  {\n    image: GalleryImg34,\n    alt: \"Lola Índigo y otras dos chicas cantando y bailando sobre el escenario.\",\n    thumb: \"thumb33\",\n  },\n  {\n    image: GalleryImg35,\n    alt: \"Lola Índigo y otras dos chicas cantando y bailando sobre el escenario.\",\n    thumb: \"thumb34\",\n  },\n  {\n    image: GalleryImg36,\n    alt: \"El público mirando la coreografía de Lola Lolita junto a su grupo.\",\n    thumb: \"thumb35\",\n  },\n  { image: GalleryImg37, alt: \"Imagen de la galería 37.\", thumb: \"thumb36\" },\n]\n"
  },
  {
    "path": "src/consts/geoJSONData.ts",
    "content": "import type { FeatureCollection, Geometry, GeoJsonProperties } from \"geojson\"\n\nexport const lolalolitalandGeoJSON: FeatureCollection<Geometry, GeoJsonProperties> = {\n  type: \"FeatureCollection\",\n  features: [\n    {\n      type: \"Feature\",\n      properties: {\n        name: \"Aquopolis Villanueva de la Cañada\",\n        amenity: \"Parque Acuático\",\n        popupContent: \"Lolalolitaland\",\n      },\n      geometry: {\n        coordinates: [\n          [\n            [-3.99076369718523, 40.45536289516917],\n            [-3.9903189790816214, 40.45554486964127],\n            [-3.990155158873449, 40.455574594431596],\n            [-3.9900581269040174, 40.4555765121593],\n            [-3.989746213601734, 40.45562017324792],\n            [-3.9891993962796732, 40.45577514093404],\n            [-3.9877151778341897, 40.4565245001821],\n            [-3.986617827976488, 40.45688371127795],\n            [-3.986762901959281, 40.45739742873948],\n            [-3.986874497331769, 40.458015158171435],\n            [-3.9871395363399245, 40.45832295937666],\n            [-3.9872399721744216, 40.45822531225053],\n            [-3.98763892562863, 40.458221066720256],\n            [-3.987895594983911, 40.458333573185996],\n            [-3.9883615793518743, 40.458009647005866],\n            [-3.9889269617388265, 40.458145917956614],\n            [-3.9890551384914943, 40.4581485899335],\n            [-3.989316473572501, 40.4581222396026],\n            [-3.9896014481069244, 40.458347573973214],\n            [-3.989959063207891, 40.458262542223935],\n            [-3.9901490462303855, 40.45801169793688],\n            [-3.9904675471792928, 40.45781187215661],\n            [-3.9911771896460095, 40.457905407701986],\n            [-3.9914006990829876, 40.45762054904381],\n            [-3.991830954751606, 40.45762054904381],\n            [-3.9919594726791843, 40.45739946387951],\n            [-3.9912386547409824, 40.45630253057408],\n            [-3.9908475132244234, 40.4562089927972],\n            [-3.990981618887105, 40.4558518473593],\n            [-3.990875451903719, 40.455826336897786],\n            [-3.990836337751716, 40.45589861651237],\n            [-3.9906072405783277, 40.45586460258619],\n            [-3.990646354730387, 40.45577531594671],\n            [-3.9908810396400725, 40.45557123175476],\n            [-3.99076369718523, 40.45536289516917],\n          ],\n        ],\n        type: \"Polygon\",\n      },\n    },\n  ],\n}\n\n/**\n * @type {GeoJSON.GeoJsonObject}\n */\nexport const potaBlavaGeoJSON: FeatureCollection<Geometry, GeoJsonProperties> = {\n  type: \"FeatureCollection\",\n\n  features: [\n    {\n      type: \"Feature\",\n      properties: {\n        name: \"El Prat de Llobregat\",\n        amenity: \"Ciudad\",\n        popupContent: \"El Prat de Llobregat\",\n      },\n      geometry: {\n        coordinates: [\n          [\n            [2.0945220342870527, 41.33458690034561],\n            [2.0847138915145536, 41.331468102419336],\n            [2.081260991679869, 41.32943896819731],\n            [2.0750558690643004, 41.32203576302666],\n            [2.0755562372234806, 41.32015665316527],\n            [2.080310170662699, 41.315308274548414],\n            [2.082662102693604, 41.31365447275482],\n            [2.0846137177570654, 41.31320342453546],\n            [2.092320172776084, 41.31218856656821],\n            [2.093220903020807, 41.3163606571309],\n            [2.0942717976104177, 41.31876607610627],\n            [2.0952225897980554, 41.319179499686044],\n            [2.0972242755620982, 41.319367415682706],\n            [2.0983251971485117, 41.31820231507206],\n            [2.09647364733749, 41.317300286831085],\n            [2.0974744877031526, 41.315721709910974],\n            [2.0983108585439822, 41.315862318781285],\n            [2.1006538515882767, 41.316724486417],\n            [2.104239102690798, 41.317362246919686],\n            [2.102879225001061, 41.31952810403456],\n            [2.1024426319370946, 41.32019650904729],\n            [2.1020899990773216, 41.32131890959104],\n            [2.1039539156197975, 41.3221007951754],\n            [2.1049950221570555, 41.322794395502854],\n            [2.105364447058065, 41.32256739984433],\n            [2.1080175895234277, 41.32522824370241],\n            [2.110737900153538, 41.326552319827016],\n            [2.11006621851638, 41.32806551673701],\n            [2.1088890598913395, 41.32946273622369],\n            [2.1069583312912243, 41.33144228403759],\n            [2.1048605204076125, 41.333491470875686],\n            [2.102502803751662, 41.33471816412478],\n            [2.0959865947252183, 41.33322661361933],\n            [2.0945220342870527, 41.33458690034561],\n          ],\n        ],\n        type: \"Polygon\",\n      },\n    },\n  ],\n}\n"
  },
  {
    "path": "src/consts/map-styles.js",
    "content": "export const MAP_STYLES = \n[\n  {\n    \"featureType\": \"all\",\n    \"elementType\": \"geometry.stroke\",\n    \"stylers\": [\n      {\n        \"visibility\": \"simplified\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"administrative\",\n    \"elementType\": \"all\",\n    \"stylers\": [\n      {\n        \"visibility\": \"off\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"administrative\",\n    \"elementType\": \"labels\",\n    \"stylers\": [\n      {\n        \"visibility\": \"simplified\"\n      },\n      {\n        \"color\": \"#a31645\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"landscape\",\n    \"elementType\": \"all\",\n    \"stylers\": [\n      {\n        \"weight\": \"3.79\"\n      },\n      {\n        \"visibility\": \"on\"\n      },\n      {\n        \"color\": \"#ffecf0\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"landscape\",\n    \"elementType\": \"geometry\",\n    \"stylers\": [\n      {\n        \"visibility\": \"on\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"landscape\",\n    \"elementType\": \"geometry.stroke\",\n    \"stylers\": [\n      {\n        \"visibility\": \"on\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"poi\",\n    \"elementType\": \"all\",\n    \"stylers\": [\n      {\n        \"visibility\": \"simplified\"\n      },\n      {\n        \"color\": \"#a31645\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"poi\",\n    \"elementType\": \"geometry\",\n    \"stylers\": [\n      {\n        \"saturation\": \"0\"\n      },\n      {\n        \"lightness\": \"0\"\n      },\n      {\n        \"visibility\": \"off\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"poi\",\n    \"elementType\": \"geometry.stroke\",\n    \"stylers\": [\n      {\n        \"visibility\": \"off\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"poi.business\",\n    \"elementType\": \"all\",\n    \"stylers\": [\n      {\n        \"visibility\": \"simplified\"\n      },\n      {\n        \"color\": \"#d89ca8\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"poi.business\",\n    \"elementType\": \"geometry\",\n    \"stylers\": [\n      {\n        \"visibility\": \"on\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"poi.business\",\n    \"elementType\": \"geometry.fill\",\n    \"stylers\": [\n      {\n        \"visibility\": \"on\"\n      },\n      {\n        \"saturation\": \"0\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"poi.business\",\n    \"elementType\": \"labels\",\n    \"stylers\": [\n      {\n        \"color\": \"#a31645\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"poi.business\",\n    \"elementType\": \"labels.icon\",\n    \"stylers\": [\n      {\n        \"visibility\": \"simplified\"\n      },\n      {\n        \"lightness\": \"84\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"road\",\n    \"elementType\": \"all\",\n    \"stylers\": [\n      {\n        \"saturation\": -100\n      },\n      {\n        \"lightness\": 45\n      }\n    ]\n  },\n  {\n    \"featureType\": \"road.highway\",\n    \"elementType\": \"all\",\n    \"stylers\": [\n      {\n        \"visibility\": \"simplified\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"road.arterial\",\n    \"elementType\": \"labels.icon\",\n    \"stylers\": [\n      {\n        \"visibility\": \"off\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"transit\",\n    \"elementType\": \"all\",\n    \"stylers\": [\n      {\n        \"visibility\": \"off\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"water\",\n    \"elementType\": \"all\",\n    \"stylers\": [\n      {\n        \"color\": \"#d89ca8\"\n      },\n      {\n        \"visibility\": \"on\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"water\",\n    \"elementType\": \"geometry.fill\",\n    \"stylers\": [\n      {\n        \"visibility\": \"on\"\n      },\n      {\n        \"color\": \"#fedce3\"\n      }\n    ]\n  },\n  {\n    \"featureType\": \"water\",\n    \"elementType\": \"labels\",\n    \"stylers\": [\n      {\n        \"visibility\": \"off\"\n      }\n    ]\n  }\n]\n"
  },
  {
    "path": "src/layouts/Layout.astro",
    "content": "---\nimport \"@fontsource/poppins/400.css\"\nimport \"@fontsource/poppins/500.css\"\nimport \"@fontsource/poppins/600.css\"\nimport \"@fontsource/poppins/700.css\"\nimport \"@fontsource/poppins/900.css\"\nimport Header from \"@/components/Header.astro\"\nimport BackToTop from \"@/components/BackToTop.astro\"\n\nimport \"@/styles/global.css\"\n\ninterface Props {\n  title?: string\n}\n\nconst { title = \"Lola Lolita Land · 14 y 15 de Junio en Aquopolis, Madrid\" } = Astro.props\nconst preloadImg = \"/images/hero.webp\"\n---\n\n<!doctype html>\n<html lang=\"es\" class=\"scroll-smooth\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link rel=\"preload\" as=\"image\" href={preloadImg} />\n    <title>{title}</title>\n    <meta\n      name=\"description\"\n      content=\"Evento organizado por Lola Lolita. Atracciones, música y muchísimos otros influencers presentes en uno de los mayores eventos organizados en España por una estrella de las redes sociales.\"\n    />\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\" />\n    <meta property=\"og:title\" content=\"Lola Lolita Land\" />\n    <meta\n      property=\"og:description\"\n      content=\"Lola Lolita Land te espera el 14 y 15 de junio en Aquópolis Madrid. Vive dos días de diversión con un parque acuático lleno de sorpresas, toboganes y piscinas. Celebra el inicio del verano con una experiencia única, la segunda edición de este evento lleno de invitados especiales y momentos inolvidables. Un día para disfrutar con amigos y familiares, y crear recuerdos juntos.\"\n    />\n    <meta property=\"og:image\" content=\"/images/hero.webp\" />\n    <meta property=\"og:url\" content=\"https://www.lolalolitaland.com/\" />\n    <meta property=\"og:type\" content=\"website\" />\n    <meta property=\"og:site_name\" content=\"Lola Lolita Land\" />\n    <meta name=\"twitter:card\" content=\"photo\" />\n    <meta name=\"twitter:title\" content=\"Lola Lolita Land\" />\n    <meta\n      name=\"twitter:description\"\n      content=\"Lola Lolita Land te espera el 14 y 15 de junio en Aquópolis Madrid. Vive dos días de diversión con un parque acuático lleno de sorpresas, toboganes y piscinas. Celebra el inicio del verano con una experiencia única, la segunda edición de este evento lleno de invitados especiales y momentos inolvidables. Un día para disfrutar con amigos y familiares, y crear recuerdos juntos.\"\n    />\n    <meta name=\"twitter:image\" content=\"/images/hero.webp\" />\n    <meta name=\"twitter:url\" content=\"https://www.lolalolitaland.com/\" />\n\n    <script type=\"application/ld+json\">\n      {\n        \"@context\": \"https://schema.org\",\n        \"@type\": \"Event\",\n        \"name\": \"Lola Lolita Land\",\n        \"description\": \"Lola Lolita Land te espera el 14 y 15 de junio en Aquópolis Madrid. Vive dos días de diversión con un parque acuático lleno de sorpresas, toboganes y piscinas. Celebra el inicio del verano con una experiencia única, la segunda edición de este evento lleno de invitados especiales y momentos inolvidables.\",\n        \"image\": \"https://www.lolalolitaland.com/images/hero.webp\",\n        \"startDate\": \"2025-06-14T10:00:00+02:00\",\n        \"endDate\": \"2025-06-15T20:00:00+02:00\",\n        \"eventStatus\": \"https://schema.org/EventScheduled\",\n        \"eventAttendanceMode\": \"https://schema.org/OfflineEventAttendanceMode\",\n        \"location\": {\n          \"@type\": \"Place\",\n          \"name\": \"Aquópolis Madrid\",\n          \"address\": {\n            \"@type\": \"PostalAddress\",\n            \"addressLocality\": \"Madrid\",\n            \"addressRegion\": \"Madrid\",\n            \"addressCountry\": \"ES\"\n          }\n        },\n        \"performer\": {\n          \"@type\": \"Person\",\n          \"name\": \"Lola Lolita\"\n        },\n        \"organizer\": {\n          \"@type\": \"Organization\",\n          \"name\": \"Lola Lolita\",\n          \"url\": \"https://www.lolalolitaland.com\"\n        },\n        \"offers\": {\n          \"@type\": \"Offer\",\n          \"url\": \"https://www.lolalolitaland.com\",\n          \"availability\": \"https://schema.org/InStock\",\n          \"priceCurrency\": \"EUR\"\n        }\n      }\n    </script>\n  </head>\n\n  <body class=\"bg-primary w-screen overflow-x-hidden\">\n    <Header />\n    <slot />\n    <BackToTop />\n  </body>\n</html>\n"
  },
  {
    "path": "src/pages/404.astro",
    "content": "---\nimport Layout from \"../layouts/Layout.astro\"\nimport BubbleBackground from \"../components/BubbleBackground.astro\"\n---\n\n<Layout title=\"Página no encontrada - Lola Lolita Land\">\n  <BubbleBackground />\n  <main class=\"bg-theme-blue flex min-h-screen items-center justify-center\">\n    <div\n      class=\"container mx-auto flex flex-col items-center px-4 md:flex-row md:items-start md:justify-center md:space-x-12\"\n    >\n      <div class=\"max-w-lg text-center\">\n        <h1\n          class=\"mb-4 bg-gradient-to-r from-[#ff0695] to-[#ff99d1] bg-clip-text text-6xl font-bold text-transparent md:text-7xl lg:text-8xl\"\n        >\n          404\n        </h1>\n        <h2 class=\"mb-4 text-3xl font-bold text-white uppercase md:text-4xl\">\n          Página no encontrada\n        </h2>\n        <p class=\"mx-8 mb-8 text-lg text-balance text-white opacity-85\">\n          ¡Hola! Lo sentimos, pero no pudimos encontrar lo que buscabas. Verifica que la dirección\n          URL sea correcta.\n        </p>\n        <a\n          href=\"/\"\n          class=\"bg-primary hover:bg-primary/80 inline-block rounded-full px-8 py-3 font-bold text-white transition-colors hover:scale-105\"\n        >\n          IR AL INICIO\n        </a>\n      </div>\n    </div>\n  </main>\n</Layout>\n"
  },
  {
    "path": "src/pages/index.astro",
    "content": "---\nimport Layout from \"@/layouts/Layout.astro\"\n\nimport Hero from \"@/sections/Hero.astro\"\nimport Tickets from \"@/sections/Tickets.astro\"\nimport Map from \"@/sections/Map.astro\"\nimport Rides from \"@/sections/Rides.astro\"\nimport Gallery from \"@/sections/Gallery.astro\"\nimport FAQ from \"@/sections/FAQ.astro\"\nimport Footer from \"@/sections/Footer.astro\"\nimport Info from \"@/sections/Info.astro\"\nimport ComoLlegar from \"@/sections/ComoLlegar.astro\"\n\nexport const prerender = true\n---\n\n<Layout>\n  <Hero />\n  <Tickets />\n  <Info />\n  <ComoLlegar />\n  <Map />\n  <Rides />\n  <FAQ />\n  <Gallery />\n  <Footer />\n</Layout>\n"
  },
  {
    "path": "src/sections/ComoLlegar.astro",
    "content": ""
  },
  {
    "path": "src/sections/FAQ.astro",
    "content": "---\n// import FaqImage from \"@/assets/images/faq.webp\"\nimport FaqImage from \"@/assets/images/gallery/gallery_04.webp\"\nimport WaveSeparator from \"@/components/WaveSeparator.astro\"\nimport { Image } from \"astro:assets\"\n---\n\n<WaveSeparator bottomColor=\"var(--color-primary)\" />\n\n<section id=\"faq\">\n  <div class=\"mx-auto max-w-7xl px-6 py-24 pt-12 lg:px-8\">\n    <div class=\"lg:grid lg:grid-cols-12 lg:gap-8\">\n      <div\n        class=\"flex flex-col items-center justify-center sm:gap-y-4 lg:col-span-5 lg:items-start\"\n      >\n        <h2\n          class=\"text-center text-3xl font-semibold tracking-tight text-pretty text-white sm:text-4xl lg:text-left\"\n        >\n          Preguntas\n          <span class=\"magic relative inline-block\">\n            <span class=\"magic-star\">\n              <svg viewBox=\"0 0 512 512\">\n                <path\n                  d=\"M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z\"\n                ></path>\n              </svg>\n            </span>\n            <span class=\"magic-star\">\n              <svg viewBox=\"0 0 512 512\">\n                <path\n                  d=\"M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z\"\n                ></path>\n              </svg>\n            </span>\n            <span class=\"magic-star\">\n              <svg viewBox=\"0 0 512 512\">\n                <path\n                  d=\"M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z\"\n                ></path>\n              </svg>\n            </span>\n            <span class=\"magic-text\">frecuentes</span>\n          </span>\n        </h2>\n        <div\n          class=\"card group relative bg-cover bg-center outline-0 transition-transform duration-100\"\n          data-color=\"have\"\n        >\n          <Image\n            src={FaqImage}\n            width={384}\n            height={576}\n            alt=\"Lola Lolita firmando autógrafos en un escenario.\"\n            class=\"card-front-image card-image h-auto w-full max-w-sm rounded-[2rem]\"\n          />\n          <div class=\"card-faders\">\n            <Image\n              width={384}\n              height={576}\n              alt={\"Lola Lolita firmmando autografos1\"}\n              class=\"card-fader card-image rounded-[2rem]\"\n              src={FaqImage}\n            />\n            <Image\n              width={384}\n              height={576}\n              alt={\"Lola Lolita firmmando autografos2\"}\n              class=\"card-fader card-image rounded-[2rem]\"\n              src={FaqImage}\n            />\n            <Image\n              width={384}\n              height={576}\n              alt={\"Lola Lolita firmmando autografos3\"}\n              class=\"card-fader card-image rounded-[2rem]\"\n              src={FaqImage}\n            />\n            <Image\n              width={384}\n              height={576}\n              alt={\"Lola Lolita firmmando autografos4\"}\n              class=\"card-fader card-image rounded-[2rem]\"\n              src={FaqImage}\n            />\n            <Image\n              width={384}\n              height={576}\n              alt={\"Lola Lolita firmmando autografos5\"}\n              class=\"card-fader card-image rounded-[2rem]\"\n              src={FaqImage}\n            />\n            <Image\n              width={384}\n              height={576}\n              alt={\"Lola Lolita firmmando autografos6\"}\n              class=\"card-fader card-image rounded-[2rem]\"\n              src={FaqImage}\n            />\n            <Image\n              width={384}\n              height={576}\n              alt={\"Lola Lolita firmmando autografos7\"}\n              class=\"card-fader card-image rounded-[2rem]\"\n              src={FaqImage}\n            />\n            <Image\n              width={384}\n              height={576}\n              alt={\"Lola Lolita firmmando autografos8\"}\n              class=\"card-fader card-image rounded-[2rem]\"\n              src={FaqImage}\n            />\n          </div>\n        </div>\n      </div>\n      <div class=\"pt-[68px] lg:col-span-7 lg:mt-0\">\n        <div class=\"space-y-10\">\n          <div class=\"bg-theme-blue relative rounded-xl md:rounded-t-xl\" data-card-faq>\n            <dl>\n              <dt class=\"px-4 pt-4 font-semibold text-white\">\n                ¿Pueden ir menores de edad al evento?\n              </dt>\n              <div class=\"text-primary mx-4 my-2 border-t border-current\" aria-hidden=\"true\"></div>\n              <dd class=\"mt-1 max-w-2xl px-4 pb-6 text-sm text-pretty text-pink-100\">\n                Se prohíbe el acceso a los menores de 14 años que no vayan acompañados por un adulto\n                que se haga responsable de la custodia y comportamiento de los mismos.\n              </dd>\n            </dl>\n            <div\n              class=\"hidden opacity-100 transition-all duration-500 ease-in-out sm:block\"\n              data-wave-saparator-primary\n            >\n              <WaveSeparator bottomColor=\"var(--color-primary)\" />\n            </div>\n          </div>\n\n          <div class=\"flex flex-col items-start justify-between gap-10 lg:flex-row\">\n            <div\n              class=\"bg-theme-blue relative w-full rounded-xl md:w-auto md:rounded-t-xl\"\n              data-card-faq\n            >\n              <dl>\n                <dt class=\"px-4 pt-4 font-semibold text-white\">¿Cuántos días va a durar?</dt>\n                <div class=\"text-primary mx-4 my-2 border-t border-current\" aria-hidden=\"true\">\n                </div>\n                <dd class=\"mt-1 max-w-2xl px-4 pb-6 text-sm text-pretty text-pink-100\">\n                  Son dos días, el 14 y 15 de junio de 2025.\n                </dd>\n              </dl>\n              <div\n                class=\"hidden opacity-100 transition-all duration-500 ease-in-out sm:block\"\n                data-wave-saparator-primary\n              >\n                <WaveSeparator bottomColor=\"var(--color-primary)\" />\n              </div>\n            </div>\n\n            <div class=\"bg-theme-blue relative rounded-xl md:rounded-t-xl\" data-card-faq>\n              <dl>\n                <dt class=\"px-4 pt-4 font-semibold text-white\">¿Dónde se celebra?</dt>\n                <div class=\"text-primary mx-4 my-2 border-t border-current\" aria-hidden=\"true\">\n                </div>\n                <dd class=\"mt-1 max-w-2xl px-4 pb-6 text-sm text-pretty text-pink-100\">\n                  En el parque Aquopolis de Madrid, en Villanueva de la Cañada.\n                </dd>\n              </dl>\n              <div\n                class=\"hidden opacity-100 transition-all duration-500 ease-in-out sm:block\"\n                data-wave-saparator-primary\n              >\n                <WaveSeparator bottomColor=\"var(--color-primary)\" />\n              </div>\n            </div>\n          </div>\n\n          <div class=\"flex flex-col items-start justify-between gap-10 lg:flex-row\">\n            <div class=\"bg-theme-blue relative rounded-xl md:rounded-t-xl\" data-card-faq>\n              <dl>\n                <dt class=\"px-4 pt-4 font-semibold text-white\">¿Asistirá Lola Lolita?</dt>\n                <div class=\"text-primary mx-4 my-2 border-t border-current\" aria-hidden=\"true\">\n                </div>\n                <dd class=\"mt-1 max-w-2xl px-4 pb-6 text-sm text-pretty text-pink-100\">\n                  Sí, Lola Lolita estará allí con unas cuantas sorpresas.\n                </dd>\n              </dl>\n              <div\n                class=\"hidden opacity-100 transition-all duration-500 ease-in-out sm:block\"\n                data-wave-saparator-primary\n              >\n                <WaveSeparator bottomColor=\"var(--color-primary)\" />\n              </div>\n            </div>\n\n            <div class=\"bg-theme-blue relative rounded-xl md:rounded-t-xl\" data-card-faq>\n              <dl>\n                <dt class=\"px-4 pt-4 font-semibold text-white\">\n                  ¿Hay comida para celíacos, veganos y vegetarianos?\n                </dt>\n                <div class=\"text-primary mx-4 my-2 border-t border-current\" aria-hidden=\"true\">\n                </div>\n                <dd class=\"mt-1 max-w-2xl px-4 pb-6 text-sm text-pretty text-pink-100\">\n                  ¡Por supuesto que sí! Hay opciones para todos los gustos y necesidades. ¡Nadie se\n                  quedará sin disfrutar de este día!\n                </dd>\n              </dl>\n              <div\n                class=\"hidden opacity-100 transition-all duration-500 ease-in-out sm:block\"\n                data-wave-saparator-primary\n              >\n                <WaveSeparator bottomColor=\"var(--color-primary)\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<style>\n  .card {\n    background-size: cover;\n    background-position: center;\n    position: relative;\n    outline: none;\n  }\n\n  .card .card-front-image {\n    position: relative;\n    z-index: 2;\n  }\n\n  .card .card-image {\n    width: clamp(300px, 20vw, 500px);\n    aspect-ratio: 2 / 3;\n    border-radius: clamp(0.5rem, 0.75vw, 2rem);\n  }\n\n  .card-faders {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    left: 0px;\n    top: 0px;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity 1500ms;\n    pointer-events: none;\n  }\n\n  .card:hover .card-faders {\n    opacity: 1;\n  }\n\n  .card-fader {\n    position: absolute;\n    left: 0px;\n    top: 0px;\n  }\n\n  .card-fader:nth-child(odd) {\n    animation: fade-left 3s linear infinite;\n  }\n\n  .card-fader:nth-child(even) {\n    animation: fade-right 3s linear infinite;\n  }\n\n  .card-fader:is(:nth-child(3), :nth-child(4)) {\n    animation-delay: 750ms;\n  }\n\n  .card-fader:is(:nth-child(5), :nth-child(6)) {\n    animation-delay: 1500ms;\n  }\n\n  .card-fader:is(:nth-child(7), :nth-child(8)) {\n    animation-delay: 2250ms;\n  }\n\n  @media (max-width: 1200px) {\n    .card .card-image {\n      width: 400px;\n    }\n  }\n\n  @media (max-width: 600px) {\n    .card {\n      width: 80%;\n    }\n\n    .card .card-image {\n      width: 100%;\n    }\n  }\n\n  @keyframes fade-left {\n    from {\n      scale: 1;\n      translate: 0%;\n      opacity: 1;\n    }\n\n    to {\n      scale: 0.8;\n      translate: -30%;\n      opacity: 0;\n    }\n  }\n\n  @keyframes fade-right {\n    from {\n      scale: 1;\n      translate: 0%;\n      opacity: 1;\n    }\n\n    to {\n      scale: 0.8;\n      translate: 30%;\n      opacity: 0;\n    }\n  }\n\n  .magic-star {\n    --size: clamp(20px, 1.5vw, 30px);\n\n    animation: scale 700ms ease forwards;\n    display: block;\n    height: var(--size);\n    left: var(--star-left);\n    position: absolute;\n    top: var(--star-top);\n    width: var(--size);\n  }\n\n  .magic > .magic-star > svg {\n    animation: rotate 1000ms linear infinite;\n    display: block;\n    opacity: 0.7;\n  }\n\n  .magic > .magic-star > svg > path {\n    fill: #dfdf18;\n  }\n\n  .magic > .magic-text {\n    animation: background-pan 3s linear infinite;\n    background: linear-gradient(to right, #383acf, #61e2e5, #383acf, #383acf);\n    background-size: 200%;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    white-space: nowrap;\n  }\n</style>\n\n<script>\n  let index = 0\n  let interval = 1000\n\n  const rand = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min\n\n  const animate = (star: HTMLElement) => {\n    star.style.setProperty(\"--star-left\", `${rand(-10, 100)}%`)\n    star.style.setProperty(\"--star-top\", `${rand(-40, 80)}%`)\n\n    star.style.animation = \"none\"\n    star.offsetHeight\n    star.style.animation = \"\"\n  }\n\n  for (const star of document.getElementsByClassName(\n    \"magic-star\"\n  ) as HTMLCollectionOf<HTMLElement>) {\n    setTimeout(\n      () => {\n        animate(star)\n\n        setInterval(() => animate(star), 1000)\n      },\n      index++ * (interval / 3)\n    )\n  }\n</script>\n"
  },
  {
    "path": "src/sections/Footer.astro",
    "content": "---\nimport Sponsor from \"@/components/Sponsor.astro\"\nimport Instagram from \"../../public/icons/instagram.svg\"\nimport TikTok from \"../../public/icons/tiktok.svg\"\nimport InfoJobs from \"../assets/infojobs.svg\"\n---\n\n<footer\n  class=\"footer footer-horizontal footer-center text-primary-content flex flex-col items-center justify-center p-10 text-center\"\n>\n  <aside class=\"flex flex-col items-center\">\n    <div\n      class=\"logo lazy_background_image_maskImage lazy_background_image relative size-28 lg:size-32\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"4.71132 2 10.58 15\"\n        role=\"img\"\n        aria-labelledby=\"logoTitle\"\n      >\n        <title id=\"logoTitle\">Lola Lolita Land</title>\n        <path\n          d=\"M 5 2 L 15 2 C 16 3 14 4 15 5 C 16 6 14 7 15 8 C 16 9 14 10 15 11 C 16 12 14 13 15 14 C 16 15 14 16 15 17 L 5 17 C 4 16 6 15 5 14 C 4 13 6 12 5 11 C 4 10 6 9 5 8 C 4 7 6 6 5 5 C 4 4 6 3 5 2\"\n          fill=\"#383acf\"></path>\n      </svg>\n    </div>\n\n    <nav class=\"mt-6\">\n      <div class=\"grid grid-flow-col gap-4\">\n        <a\n          class=\"transition hover:scale-110\"\n          href=\"https://www.instagram.com/lolalolita/\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Visitar perfil de Instagram de Lola Lolita\"\n        >\n          <span class=\"sr-only\">Instagram de Lola Lolita</span>\n          <Instagram name=\"instagram\" class=\"size-6 fill-white md:size-8\" aria-hidden=\"true\" />\n        </a>\n        <a\n          class=\"transition hover:scale-110\"\n          href=\"https://www.tiktok.com/@lolalolita\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"Visitar perfil de TikTok de Lola Lolita\"\n        >\n          <span class=\"sr-only\">TikTok de Lola Lolita</span>\n          <TikTok name=\"tiktok\" class=\"size-6 fill-white md:size-8\" aria-hidden=\"true\" />\n        </a>\n      </div>\n    </nav>\n\n    <div class=\"mt-8 flex flex-wrap justify-center gap-4\">\n      <a\n        class=\"text-xs text-white/80 transition hover:text-white hover:underline\"\n        href=\"https://villanueva.aquopolis.es/condiciones-de-contratacion\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        Condiciones de contratación\n      </a>\n      <a\n        class=\"text-xs text-white/80 transition hover:text-white hover:underline\"\n        href=\"https://villanueva.aquopolis.es/normas-de-funcionamiento\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        Normas de funcionamiento\n      </a>\n    </div>\n\n    <div\n      class=\"mt-8 mb-8 flex items-center justify-center gap-2 rounded bg-white px-4 text-xs text-black\"\n    >\n      Web patrocinada por:\n      <Sponsor href=\"https://www.infojobs.net/\" isOfficial>\n        <InfoJobs\n          title=\"InfoJobs\"\n          width=\"90\"\n          height=\"27\"\n          class=\"inline-block transition-transform group-hover:scale-110\"\n        />\n      </Sponsor>\n    </div>\n\n    <p class=\"90 mt-2 text-xs text-pretty text-white\">\n      Copyright © {new Date().getFullYear()} - Todos los derechos reservados\n    </p>\n  </aside>\n</footer>\n\n<style>\n  .logo {\n    -webkit-mask-image: url(\"/favicon.svg\");\n    mask-image: url(\"/favicon.svg\");\n    -webkit-mask-size: cover;\n    mask-size: cover;\n    background-color: rgb(243, 243, 243);\n    position: relative;\n    overflow: hidden;\n  }\n  .lazy_background_image_maskImage {\n    -webkit-mask-size: cover;\n    mask-size: cover;\n    -webkit-mask-image: url(\"/favicon.svg\");\n    mask-image: url(\"/favicon.svg\");\n  }\n  .lazy_background_image {\n    transition: 1s cubic-bezier(0.6, 0.6, 0, 1) opacity;\n  }\n  .logo svg {\n    width: 200px;\n    height: 300px;\n    position: absolute;\n    top: 10px;\n    left: 0;\n    animation: 8s linear infinite;\n    transform: translate(-300px, -70px) rotate(20deg);\n    animation-name: logo_animation !important;\n  }\n\n  @keyframes logo_animation {\n    0% {\n      transform: translate(-300px, -70px) rotate(20deg);\n    }\n    100% {\n      transform: translate(600px, -70px) rotate(20deg);\n    }\n  }\n</style>\n"
  },
  {
    "path": "src/sections/Gallery.astro",
    "content": "---\nimport { galleryImages } from \"@/consts/galleryImages\"\n\nimport { Image } from \"astro:assets\"\nimport BubbleBackground from \"@/components/BubbleBackground.astro\"\nimport WaveSeparator from \"@/components/WaveSeparator.astro\"\n---\n\n<WaveSeparator bottomColor=\"var(--color-primary)\" hasBubbles />\n\n<section class=\"bg-theme-blue relative py-16 md:px-6 lg:px-8\">\n  <BubbleBackground />\n  <div class=\"mx-auto max-w-6xl\" id=\"gallery\">\n    <div class=\"relative mb-12 flex items-center justify-center\">\n      <h2\n        class=\"title mb-2 block p-4 text-center text-[1.65rem] font-bold text-white sm:text-sm lg:text-4xl xl:text-5xl\"\n      >\n        ¡Así fue el año pasado!\n      </h2>\n      <h2\n        class=\"title2 mb-2 block p-4 text-center text-[1.65rem] font-bold text-white sm:text-sm lg:text-4xl xl:text-5xl\"\n      >\n        ¡Así fue el año pasado!\n      </h2>\n    </div>\n    <h3\n      class=\"block pb-20 text-center text-lg font-bold text-white opacity-80 max-md:px-6 max-md:pb-5\"\n    >\n      Aquí tienes algunos recuerdos de la primera edición de Lola Lolita Land\n    </h3>\n\n    <ul\n      id=\"slider-mobile\"\n      class=\"flex snap-x snap-mandatory overflow-x-auto p-10 md:hidden [&>*:nth-child(even)]:rotate-2 [&>*:nth-child(odd)]:rotate-[-2deg]\"\n    >\n      {\n        galleryImages.map(({ image, alt, thumb }, index) => (\n          <li\n            class=\"-m-1 aspect-9/10 w-72 shrink-0 cursor-pointer snap-center rounded-md shadow-sm transition-transform duration-300 will-change-transform\"\n            id={thumb + \"slider\"}\n            data-index={index}\n          >\n            <Image\n              src={image}\n              alt={alt}\n              width={950}\n              height={900}\n              data-thumbID={thumb + \"slider\"}\n              class=\"border-theme-blue-light h-full w-full rounded-md border border-dashed object-cover\"\n              loading=\"lazy\"\n            />\n          </li>\n        ))\n      }\n    </ul>\n\n    <ul\n      class=\"hidden grid-cols-1 gap-8 sm:grid-cols-2 md:grid md:grid-cols-3 lg:grid-cols-4 [&>*:nth-child(even)]:rotate-2 [&>*:nth-child(n)]:hover:scale-105 [&>*:nth-child(n)]:hover:rotate-0 [&>*:nth-child(n)]:hover:shadow-xl [&>*:nth-child(odd)]:rotate-[-2deg]\"\n    >\n      {\n        galleryImages.map(({ image, alt, thumb }, index) => (\n          <li\n            id={thumb}\n            class=\"aspect-9/10 cursor-pointer rounded-md shadow-sm transition-transform duration-300 will-change-transform\"\n            data-index={index}\n          >\n            <Image\n              src={image}\n              alt={alt}\n              width={950}\n              height={900}\n              data-thumbID={thumb}\n              class=\"border-theme-blue-light h-full w-full rounded-md border border-dashed object-cover\"\n              loading=\"lazy\"\n            />\n          </li>\n        ))\n      }\n    </ul>\n  </div>\n  <div\n    class=\"pointer-events-none fixed inset-0 flex cursor-pointer items-center justify-center p-4 opacity-0 transition-opacity duration-300 ease-in-out\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"lightbox-title\"\n    id=\"lightbox\"\n  >\n    <h2 id=\"lightbox-title\" class=\"sr-only\">Galería de imágenes de Lola Lolita Land</h2>\n    <div class=\"relative w-full max-w-5xl p-4\">\n      <button\n        type=\"button\"\n        id=\"close-lightbox\"\n        class=\"hover:text-primary absolute top-1 -right-16 z-[999999] cursor-pointer rounded-full bg-white p-2.5 text-gray-700 transition-all duration-300 ease-in will-change-transform hover:scale-125 sm:top-6 sm:right-6 md:top-8 md:right-8\"\n      >\n        <span class=\"sr-only\">Cerrar Galería</span>\n        <svg\n          class=\"size-6\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          aria-hidden=\"true\"\n          data-slot=\"icon\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n        </svg>\n      </button>\n\n      <button\n        id=\"prev-image\"\n        class=\"hover:text-primary absolute -bottom-16 left-8 z-50 flex h-12 w-12 transform cursor-pointer items-center justify-center rounded-full bg-white p-2.5 text-2xl text-gray-700 transition-all duration-300 ease-in-out hover:scale-125 md:top-1/2 md:-translate-y-1/2 lg:-left-16\"\n      >\n        &#60;\n      </button>\n\n      <button\n        id=\"next-image\"\n        class=\"hover:text-primary absolute right-8 -bottom-16 z-50 flex h-12 w-12 transform cursor-pointer items-center justify-center rounded-full bg-white p-2.5 text-2xl text-gray-700 transition-all duration-300 ease-in-out hover:scale-125 md:top-1/2 md:-translate-y-1/2 lg:-right-16\"\n      >\n        &#62;\n      </button>\n\n      <figure id=\"light-box-content\"></figure>\n    </div>\n  </div>\n</section>\n\n<WaveSeparator bottomColor=\"var(--color-primary)\" />\n\n<script>\n  const galleryItems = Array.from(\n    document.querySelectorAll(\"#gallery li img\")\n  ) as HTMLImageElement[]\n  const lightBox = document.getElementById(\"lightbox\") as HTMLDivElement\n  const lightBoxImgContainer = document.getElementById(\"light-box-content\") as HTMLDivElement\n  const btnCloseLightBox = document.getElementById(\"close-lightbox\") as HTMLButtonElement\n  const btnPrev = document.getElementById(\"prev-image\") as HTMLButtonElement\n  const btnNext = document.getElementById(\"next-image\") as HTMLButtonElement\n\n  let currentIndex = 0\n\n  const openLightBox = (index: number) => {\n    if (index < 0 || index >= galleryItems.length) return\n    currentIndex = index\n    const image = galleryItems[index] as HTMLImageElement\n\n    const previousImage = lightBoxImgContainer.querySelector(\"img\") as HTMLImageElement\n    if (previousImage) {\n      const galleryParentID = previousImage.getAttribute(\"data-thumbID\")\n      const galleryParent = document.getElementById(`${galleryParentID}`) as HTMLLIElement\n      galleryParent.appendChild(previousImage)\n    }\n    // Evitamos el error de dupliacado de viewTransitionName\n    galleryItems.forEach((img) => (img.style.viewTransitionName = \"none\"))\n    image.style.viewTransitionName = \"selected-img\"\n\n    lightBoxImgContainer.appendChild(image)\n    lightBox.classList.remove(\"opacity-0\", \"pointer-events-none\")\n    lightBox.classList.add(\n      \"bg-[#ff0693a4]\",\n      \"z-[9999]\",\n      \"opacity-100\",\n      \"pointer-events-auto\",\n      \"backdrop-blur-[10px]\"\n    )\n\n    document.body.style.overflow = \"hidden\"\n    updateNavigationButtons()\n  }\n\n  const closeLightBox = (image: HTMLImageElement) => {\n    lightBox.classList.add(\"opacity-0\", \"pointer-events-none\")\n    lightBox.classList.remove(\n      \"bg-[#ff0693a4]\",\n      \"z-[9999]\",\n      \"opacity-100\",\n      \"pointer-events-auto\",\n      \"backdrop-blur-[10px]\"\n    )\n    const galleryParentID = image.getAttribute(\"data-thumbID\")\n\n    const galleryParent = document.getElementById(`${galleryParentID}`) as HTMLLIElement\n    galleryParent.appendChild(image)\n    document.body.style.overflow = \"\" // Restaurar scroll\n  }\n\n  const navigateLightBox = (direction: number) => {\n    let newIndex = currentIndex + direction\n    if (newIndex < 0 || newIndex >= galleryItems.length) return\n\n    if (!document.startViewTransition) {\n      openLightBox(newIndex)\n      return\n    }\n\n    document.startViewTransition(() => {\n      openLightBox(newIndex)\n    })\n  }\n\n  const updateNavigationButtons = () => {\n    if (btnPrev && btnNext) {\n      btnPrev.style.display = currentIndex > 0 ? \"flex\" : \"none\"\n      btnNext.style.display = currentIndex < galleryItems.length - 1 ? \"flex\" : \"none\"\n    }\n  }\n\n  galleryItems.forEach((image, index) => {\n    image.addEventListener(\"click\", () => {\n      if (!document.startViewTransition) {\n        openLightBox(index)\n        return\n      }\n\n      galleryItems.forEach((img) => {\n        img.style.viewTransitionName = \"\"\n      })\n\n      image.style.viewTransitionName = \"selected-img\"\n\n      document.startViewTransition(() => {\n        openLightBox(index)\n      })\n    })\n  })\n\n  const handleClose = async () => {\n    const image = lightBoxImgContainer.querySelector(\"img\") as HTMLImageElement\n    if (!image) return\n\n    if (!document.startViewTransition) {\n      closeLightBox(image)\n      return\n    }\n\n    const animation = document.startViewTransition(() => {\n      closeLightBox(image)\n    })\n\n    await animation.finished\n    image.style.viewTransitionName = \"none\"\n  }\n\n  lightBox.addEventListener(\"click\", handleClose)\n  btnCloseLightBox.addEventListener(\"click\", (event) => {\n    event.stopPropagation()\n    handleClose()\n  })\n\n  if (btnPrev && btnNext) {\n    btnPrev.addEventListener(\"click\", (event) => {\n      event.stopPropagation()\n      navigateLightBox(-1)\n    })\n\n    btnNext.addEventListener(\"click\", (event) => {\n      event.stopPropagation()\n      navigateLightBox(1)\n    })\n  }\n\n  document.addEventListener(\"keydown\", async (event) => {\n    const isLightboxOpen = !lightBox.classList.contains(\"opacity-0\")\n\n    if (event.key === \"Escape\") {\n      await handleClose()\n    } else if ((event.key === \"ArrowRight\" || event.key === \"d\") && isLightboxOpen) {\n      event.preventDefault()\n      navigateLightBox(1)\n    } else if ((event.key === \"ArrowLeft\" || event.key === \"a\") && isLightboxOpen) {\n      event.preventDefault()\n      navigateLightBox(-1)\n    }\n  })\n\n  const slider = document.getElementById(\"slider-mobile\") as HTMLDivElement\n  const sliderItems = Array.from(slider.children) as HTMLElement[]\n\n  if (slider) {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            ;(entry.target as HTMLElement).style.transform = \"scale(1)\"\n          } else {\n            ;(entry.target as HTMLElement).style.transform = \"scale(0.8)\"\n          }\n        })\n      },\n      {\n        root: slider,\n        threshold: 0.9,\n      }\n    )\n\n    sliderItems.forEach((item) => {\n      observer.observe(item)\n    })\n  }\n</script>\n\n<style>\n  .title {\n    position: absolute;\n    color: transparent;\n    -webkit-text-stroke: 2px white;\n  }\n  .title2 {\n    position: absolute;\n    color: #ff0695;\n    animation: water 3s ease-in-out infinite;\n  }\n  @keyframes water {\n    0%,\n    100% {\n      clip-path: polygon(\n        0% 65%,\n        10% 50%,\n        25% 35%,\n        40% 50%,\n        55% 65%,\n        70% 50%,\n        85% 35%,\n        100% 50%,\n        100% 100%,\n        0% 100%\n      );\n    }\n    50% {\n      clip-path: polygon(\n        0% 35%,\n        15% 50%,\n        30% 65%,\n        45% 50%,\n        60% 35%,\n        75% 50%,\n        90% 65%,\n        100% 50%,\n        100% 100%,\n        0% 100%\n      );\n    }\n  }\n\n  #slider-mobile {\n    scrollbar-width: none;\n  }\n\n  #slider-mobile::-webkit-scrollbar {\n    display: none;\n  }\n</style>\n"
  },
  {
    "path": "src/sections/Hero.astro",
    "content": "---\nimport DotBackground from \"../components/DotBackground.astro\"\n---\n\n<section class=\"relative pb-12\">\n  <DotBackground />\n  <div\n    class=\"bg-theme-blue-light relative mx-auto mb-16 h-screen w-full md:aspect-video md:h-full md:object-cover\"\n  >\n    <div\n      title=\"Logo de Lola Lolita Land\"\n      class=\"absolute top-20 right-0 left-0 z-50 mx-auto flex justify-center md:top-0 lg:top-14\"\n    >\n      <div\n        class=\"logo lazy_background_image_maskImage lazy_background_image relative size-56 md:size-44 lg:size-56\"\n      >\n        <svg viewBox=\"4.71132 2 12.58 15\">\n          <path\n            d=\"M 5 2 L 17 2 C 18 3 16 4 17 5 C 18 6 16 7 17 8 C 18 9 16 10 17 11 C 18 12 16 13 17 14 C 18 15 16 16 17 17 L 5 17 C 4 16 6 15 5 14 C 4 13 6 12 5 11 C 4 10 6 9 5 8 C 4 7 6 6 5 5 C 4 4 6 3 5 2\"\n            fill=\"#ff0695\"></path>\n        </svg>\n      </div>\n    </div>\n\n    <div\n      class=\"image relative\"\n      title=\"Fotografía de una joven recostada, que es Lola Lolita, sobre la arena con una cola de sirena azul, frente a una piscina con toboganes rosas en un entorno tropical, con el texto ‘Lola Lolita Land’ en la parte superior.\"\n    >\n      <!-- Date and location temporarily hidden\n      <div class=\"date-location-container\">\n        <div class=\"date\">14-15 DE JUNIO</div>\n        <div class=\"location\">Aquopolis de Madrid</div>\n      </div>\n      -->\n      <div class=\"water\"></div>\n\n      <svg>\n        <defs>\n          <filter id=\"turbulence\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n            <feTurbulence\n              id=\"sea-filter\"\n              type=\"fractalNoise\"\n              numOctaves=\"3\"\n              seed=\"2\"\n              baseFrequency=\"0.01 0.04\"></feTurbulence>\n            <feDisplacementMap scale=\"10\" in=\"SourceGraphic\"></feDisplacementMap>\n            <animate\n              xlink:href=\"#sea-filter\"\n              attributeName=\"baseFrequency\"\n              dur=\"60s\"\n              keyTimes=\"0;0.5;1\"\n              values=\"0.02 0.03;0.04 0.06;0.02 0.06\"\n              repeatCount=\"indefinite\"></animate>\n          </filter>\n        </defs>\n      </svg>\n    </div>\n    <div class=\"absolute inset-0 bg-gradient-to-b from-transparent from-85% to-[#ff0695]\"></div>\n    <div class=\"absolute z-20 w-full\" id=\"header-waves\">\n      <svg\n        class=\"waves\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        viewBox=\"0 24 150 28 \"\n        preserveAspectRatio=\"none\"\n      >\n        <defs>\n          <path\n            id=\"wave-path\"\n            d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\n          >\n          </path>\n        </defs>\n        <g class=\"wave4\">\n          <use xlink:href=\"#wave-path\" x=\"50\" y=\"0\" class=\"fill-[#383acf] opacity-30\"></use>\n        </g>\n        <g class=\"wave1\">\n          <use xlink:href=\"#wave-path\" x=\"50\" y=\"3\" class=\"fill-[#ff0695] opacity-50\"></use>\n        </g>\n        <g class=\"wave2\">\n          <use xlink:href=\"#wave-path\" x=\"50\" y=\"6\" class=\"fill-[#ff0695] opacity-70\"></use>\n        </g>\n        <g class=\"wave3\">\n          <use xlink:href=\"#wave-path\" x=\"50\" y=\"9\" class=\"fill-[#ff0695] opacity-50\"></use>\n        </g>\n      </svg>\n    </div>\n  </div>\n\n  <style>\n    .date-location-container {\n      position: absolute;\n      bottom: 12%;\n      left: 0;\n      right: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n      text-align: center;\n    }\n\n    .date {\n      font-family: \"Montserrat\", sans-serif;\n      font-weight: 900;\n      font-size: clamp(1.4rem, 4vw, 3rem);\n      color: #ff0695;\n      text-shadow:\n        2px 2px 0 rgba(0, 0, 0, 0.3),\n        0 0 8px rgba(0, 0, 0, 0.2);\n      letter-spacing: 1px;\n      margin-bottom: 0.1rem;\n      line-height: 1;\n    }\n\n    .location {\n      font-family: \"Montserrat\", sans-serif;\n      font-weight: 700;\n      font-size: clamp(0.8rem, 2vw, 1.5rem);\n      color: #ff6bc5;\n      text-shadow:\n        1px 1px 0 rgba(0, 0, 0, 0.3),\n        0 0 6px rgba(0, 0, 0, 0.2);\n      letter-spacing: 0.5px;\n    }\n\n    .image {\n      background-image: url(\"/images/hero.webp\");\n      height: 100%;\n      width: 100%;\n      background-size: cover;\n      z-index: 20;\n    }\n\n    .water {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-image: url(\"/images/mask_hero.webp\");\n      background-size: cover;\n      filter: url(\"#turbulence\");\n    }\n\n    @media (max-width: 640px) and (orientation: portrait) {\n      .image {\n        background-image: url(\"/images/hero_sm_portrait.webp\");\n      }\n      .water {\n        background-image: url(\"/images/mask_hero_sm_portrait.webp\");\n      }\n    }\n\n    .logo {\n      -webkit-mask-image: url(\"/favicon.svg\");\n      mask-image: url(\"/favicon.svg\");\n      -webkit-mask-size: cover;\n      mask-size: cover;\n      background-color: rgb(243, 243, 243);\n      position: relative;\n      overflow: hidden;\n    }\n    .lazy_background_image_maskImage {\n      -webkit-mask-size: cover;\n      mask-size: cover;\n      -webkit-mask-image: url(\"/favicon.svg\");\n      mask-image: url(\"/favicon.svg\");\n    }\n    .lazy_background_image {\n      transition: 1s cubic-bezier(0.6, 0.6, 0, 1) opacity;\n    }\n    .logo svg {\n      width: 250px;\n      height: 300px;\n      position: absolute;\n      top: 30px;\n      left: 0;\n      animation: 8s linear infinite;\n      transform: translate(-300px, -70px) rotate(20deg);\n      animation-name: logo_animation !important;\n    }\n\n    @keyframes logo_animation {\n      0% {\n        transform: translate(-300px, -70px) rotate(20deg);\n      }\n      100% {\n        transform: translate(600px, -70px) rotate(20deg);\n      }\n    }\n\n    /* wave animation start */\n\n    .waves {\n      height: 80px;\n      width: 100%;\n      margin-top: -70px;\n    }\n\n    .wave1 use {\n      animation: move-forever1 10s linear infinite;\n      animation-delay: -2s;\n    }\n\n    .wave2 use {\n      animation: move-forever2 8s linear infinite;\n      animation-delay: -2s;\n    }\n\n    .wave3 use {\n      animation: move-forever3 6s linear infinite;\n      animation-delay: -2s;\n    }\n\n    .wave4 use {\n      animation: move-forever3 4s linear infinite;\n      animation-delay: -2s;\n    }\n\n    @-webkit-keyframes move-forever1 {\n      0% {\n        transform: translate(85px, 0%);\n      }\n\n      100% {\n        transform: translate(-90px, 0%);\n      }\n    }\n\n    @keyframes move-forever1 {\n      0% {\n        transform: translate(85px, 0%);\n      }\n\n      100% {\n        transform: translate(-90px, 0%);\n      }\n    }\n\n    @-webkit-keyframes move-forever2 {\n      0% {\n        transform: translate(-90px, 0%);\n      }\n\n      100% {\n        transform: translate(85px, 0%);\n      }\n    }\n\n    @keyframes move-forever2 {\n      0% {\n        transform: translate(-90px, 0%);\n      }\n\n      100% {\n        transform: translate(85px, 0%);\n      }\n    }\n\n    @-webkit-keyframes move-forever3 {\n      0% {\n        transform: translate(-90px, 0%);\n      }\n\n      100% {\n        transform: translate(85px, 0%);\n      }\n    }\n\n    @keyframes move-forever3 {\n      0% {\n        transform: translate(-90px, 0%);\n      }\n\n      100% {\n        transform: translate(85px, 0%);\n      }\n    }\n\n    @-webkit-keyframes move-forever4 {\n      0% {\n        transform: translate(-90px, 0%);\n      }\n\n      100% {\n        transform: translate(85px, 0%);\n      }\n    }\n\n    @keyframes move-forever4 {\n      0% {\n        transform: translate(-90px, 0%);\n      }\n\n      100% {\n        transform: translate(85px, 0%);\n      }\n    }\n\n    .waves > use {\n      animation: wave 25s cubic-bezier(0.5, 0.5, 0.45, 0.5) infinite;\n    }\n\n    @keyframes wave {\n      0% {\n        transform: translate3d(-90px, 0, 0);\n      }\n      100% {\n        transform: translate3d(85px, 0, 0);\n      }\n    }\n\n    @keyframes background-pan {\n      from {\n        background-position: 0% center;\n      }\n\n      to {\n        background-position: -200% center;\n      }\n    }\n\n    @keyframes scale {\n      from,\n      to {\n        transform: scale(0);\n      }\n\n      50% {\n        transform: scale(1);\n      }\n    }\n\n    @keyframes rotate {\n      from {\n        transform: rotate(0deg);\n      }\n\n      to {\n        transform: rotate(180deg);\n      }\n    }\n  </style>\n</section>\n"
  },
  {
    "path": "src/sections/Info.astro",
    "content": "---\nimport { Image } from \"astro:assets\"\nimport CalendarImage from \"@/assets/images/calendario.webp\"\n---\n\n<div class=\"mx-auto max-w-2xl p-4 pb-32 lg:max-w-6xl\">\n  <div\n    class=\"mx-auto flex flex-row items-center justify-center gap-x-4 text-lg font-semibold tracking-tight text-balance text-gray-950 md:gap-x-8 md:text-2xl lg:text-3xl xl:text-4xl\"\n  >\n    <div class=\"shrink-0\">\n      <Image\n        class=\"mx-auto inline-block size-20 rounded-full md:size-28\"\n        src=\"/avatar.webp\"\n        alt=\"Lola Lolita\"\n        width={112}\n        height={112}\n      />\n    </div>\n    <span class=\"inline-block py-4 text-left text-white md:py-6 lg:py-8\">\n      ¿Estáis preparados para\n      <br />\n      pasar\n      <span class=\"magic relative inline-block\">\n        <span class=\"magic-star\">\n          <svg viewBox=\"0 0 512 512\">\n            <path\n              d=\"M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z\"\n            ></path>\n          </svg>\n        </span>\n        <span class=\"magic-star\">\n          <svg viewBox=\"0 0 512 512\">\n            <path\n              d=\"M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z\"\n            ></path>\n          </svg>\n        </span>\n        <span class=\"magic-star\">\n          <svg viewBox=\"0 0 512 512\">\n            <path\n              d=\"M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z\"\n            ></path>\n          </svg>\n        </span>\n        <span class=\"magic-text\">dos días inolvidables</span>?\n      </span>\n    </span>\n  </div>\n  <div\n    class=\"view-animate-[--subjectReveal] animate-zoom-in animate-range-[entry_0%_cover_20%] grid scroll-mt-[31rem] grid-cols-1 gap-4 pt-10 sm:mt-4 md:scroll-mt-[34rem] lg:scroll-mt-[26rem] lg:grid-cols-6\"\n    id=\"info\"\n  >\n    <div class=\"relative lg:col-span-3\">\n      <div\n        class=\"relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] bg-white max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)] lg:rounded-bl-[calc(2rem+1px)]\"\n      >\n        <div class=\"relative h-80 w-full overflow-hidden\">\n          <Image\n            class=\"relative h-full w-full object-cover object-[85%_center] [mask-image:linear-gradient(to_bottom,black_80%,transparent_100%)] sm:object-center\"\n            src={CalendarImage}\n            width={672}\n            height={320}\n            alt=\"Calendario con la fecha del evento Lola Lolita Land 14 y 15 de junio de 2025\"\n          />\n        </div>\n        <div class=\"p-4 pt-4 sm:p-6 md:p-8 lg:p-10\">\n          <h3 class=\"text-primary text-center text-sm/4 font-semibold lg:text-left\">\n            14 y 15 de junio\n          </h3>\n          <p\n            class=\"mx-auto mt-2 max-w-[50ch] text-center text-xs/5 text-balance text-gray-600 sm:text-sm/6 lg:mx-0 lg:text-left\"\n          >\n            Apunta en tu calendario, porque LolaLolita Land abre sus puertas el 14 y 15 de junio\n            para darle la bienvenida al verano.\n          </p>\n          <div class=\"mt-4 flex flex-col justify-start gap-2 lg:flex-row lg:gap-4\">\n            <a\n              class=\"group inline-flex min-h-[38px] w-full items-center justify-center space-x-1 rounded-lg bg-gradient-to-br from-[#ff0695]/90 to-[#ff0695] p-1 px-3 text-center text-xs/4 break-words text-white shadow-[inset_0px_0px_8px_rgba(255,255,255,0.2)] transition-all duration-300 ease-out hover:scale-105 hover:from-[#ff0695] hover:to-[#ff0695]/90 hover:shadow-[inset_0px_0px_12px_rgba(255,255,255,0.3)] active:scale-100 lg:w-auto\"\n              href=\"https://calendar.google.com/calendar/render?action=TEMPLATE&text=Lola+Lolita+Land+🌸&dates=20250614/20250616&details=La+experiencia+más+refrescante.&location=Aquopolis+Villanueva+de+la+Cañada\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <svg\n                class=\"transition-opacity\"\n                x=\"0px\"\n                y=\"0px\"\n                width=\"30\"\n                height=\"30\"\n                viewBox=\"0 0 48 48\"\n              >\n                <rect width=\"22\" height=\"22\" x=\"13\" y=\"13\" fill=\"#fff\"></rect>\n                <polygon\n                  fill=\"#1e88e5\"\n                  points=\"25.68,20.92 26.688,22.36 28.272,21.208 28.272,29.56 30,29.56 30,18.616 28.56,18.616\"\n                ></polygon>\n                <path\n                  fill=\"#1e88e5\"\n                  d=\"M22.943,23.745c0.625-0.574,1.013-1.37,1.013-2.249c0-1.747-1.533-3.168-3.417-3.168 c-1.602,0-2.972,1.009-3.33,2.453l1.657,0.421c0.165-0.664,0.868-1.146,1.673-1.146c0.942,0,1.709,0.646,1.709,1.44 c0,0.794-0.767,1.44-1.709,1.44h-0.997v1.728h0.997c1.081,0,1.993,0.751,1.993,1.64c0,0.904-0.866,1.64-1.931,1.64 c-0.962,0-1.784-0.61-1.914-1.418L17,26.802c0.262,1.636,1.81,2.87,3.6,2.87c2.007,0,3.64-1.511,3.64-3.368 C24.24,25.281,23.736,24.363,22.943,23.745z\"\n                ></path>\n                <polygon fill=\"#fbc02d\" points=\"34,42 14,42 13,38 14,34 34,34 35,38\"></polygon>\n                <polygon fill=\"#4caf50\" points=\"38,35 42,34 42,14 38,13 34,14 34,34\"></polygon>\n                <path fill=\"#1e88e5\" d=\"M34,14l1-4l-1-4H9C7.343,6,6,7.343,6,9v25l4,1l4-1V14H34z\"\n                ></path>\n                <polygon fill=\"#e53935\" points=\"34,34 34,42 42,34\"></polygon>\n                <path fill=\"#1565c0\" d=\"M39,6h-5v8h8V9C42,7.343,40.657,6,39,6z\"></path>\n                <path fill=\"#1565c0\" d=\"M9,42h5v-8H6v5C6,40.657,7.343,42,9,42z\"></path>\n              </svg>\n              <span>Añadir a Google Calendar</span>\n            </a>\n\n            <a\n              class=\"group inline-flex min-h-[38px] w-full items-center justify-center space-x-1 rounded-lg bg-gradient-to-br from-[#ff0695]/90 to-[#ff0695] p-1 px-3 text-center text-xs/4 break-words text-white shadow-[inset_0px_0px_8px_rgba(255,255,255,0.2)] transition-all duration-300 ease-out hover:scale-105 hover:from-[#ff0695] hover:to-[#ff0695]/90 hover:shadow-[inset_0px_0px_12px_rgba(255,255,255,0.3)] active:scale-100 lg:w-auto\"\n              href=\"/events/event-lolalolita.ics\"\n              download=\"Lola Lolita Land · 14 y 15 de Junio\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <svg x=\"0px\" y=\"0px\" width=\"30\" height=\"30\" viewBox=\"0 0 48 48\">\n                <path\n                  fill=\"#eceff1\"\n                  d=\"M15.556,43h16.889C38.274,43,43,38.274,43,32.444V15.556C43,9.726,38.274,5,32.444,5H15.556 C9.726,5,5,9.726,5,15.556v16.889C5,38.274,9.726,43,15.556,43z\"\n                ></path><path\n                  fill=\"#ff3d00\"\n                  d=\"M20.868,13.77L21.437,10h1.199l-1.067,6h-1.215l-0.7-3.536L18.96,16h-1.22l-1.071-6h1.207 l0.565,3.766L19.145,10h1.018L20.868,13.77z\"\n                ></path><path\n                  fill=\"#ff3d00\"\n                  d=\"M26.39,13.404h-1.887v1.591h2.234V16h-3.446v-6h3.437v1.009h-2.225v1.418h1.887V13.404z\"\n                ></path><path\n                  fill=\"#ff3d00\"\n                  d=\"M27.433,16v-6h1.587c0.7,0,1.259,0.223,1.675,0.667c0.416,0.445,0.628,1.055,0.636,1.83v0.973 c0,0.788-0.208,1.407-0.625,1.857C30.291,15.775,29.717,16,28.986,16H27.433z M28.645,11.009v3.985h0.363 c0.404,0,0.688-0.106,0.853-0.319c0.165-0.213,0.252-0.58,0.26-1.102V12.53c0-0.56-0.079-0.951-0.235-1.173 c-0.157-0.221-0.423-0.337-0.8-0.348H28.645z\"\n                ></path><path\n                  fill=\"#424242\"\n                  d=\"M23.211,36.004h-9.884V33.7l4.539-5.771c0.576-0.799,1-1.5,1.273-2.103 c0.273-0.603,0.409-1.181,0.409-1.734c0-0.745-0.128-1.329-0.386-1.751c-0.257-0.422-0.628-0.633-1.112-0.633 c-0.53,0-0.95,0.246-1.261,0.737c-0.311,0.492-0.467,1.183-0.467,2.074H13.05c0-1.029,0.213-1.97,0.639-2.823 c0.426-0.853,1.025-1.515,1.797-1.987C16.258,19.236,17.132,19,18.107,19c1.498,0,2.659,0.413,3.485,1.239 c0.826,0.826,1.239,1.999,1.239,3.52c0,0.944-0.229,1.903-0.685,2.874c-0.457,0.972-1.285,2.168-2.483,3.588l-2.154,3.076h5.702 V36.004z\"\n                ></path><path\n                  fill=\"#424242\"\n                  d=\"M34.662,23.689c0,0.814-0.173,1.536-0.519,2.166c-0.346,0.63-0.822,1.133-1.428,1.509 c0.691,0.392,1.237,0.931,1.636,1.619c0.399,0.687,0.599,1.496,0.599,2.425c0,1.49-0.43,2.667-1.29,3.531 c-0.86,0.864-2.032,1.296-3.514,1.296s-2.661-0.432-3.537-1.296c-0.875-0.864-1.313-2.041-1.313-3.531 c0-0.929,0.199-1.739,0.599-2.43c0.399-0.691,0.949-1.229,1.648-1.613c-0.615-0.376-1.094-0.879-1.44-1.509 c-0.346-0.63-0.519-1.351-0.519-2.166c0-1.467,0.411-2.615,1.233-3.445C27.638,19.415,28.741,19,30.123,19 c1.398,0,2.504,0.419,3.318,1.256C34.255,21.093,34.662,22.237,34.662,23.689z M30.146,33.527c0.491,0,0.87-0.21,1.135-0.628 c0.265-0.418,0.397-1,0.397-1.745s-0.138-1.328-0.415-1.751s-0.657-0.634-1.14-0.634c-0.484,0-0.866,0.211-1.146,0.634 s-0.421,1.006-0.421,1.751s0.14,1.327,0.421,1.745C29.257,33.318,29.647,33.527,30.146,33.527z M31.413,23.861 c0-0.653-0.106-1.175-0.317-1.566c-0.211-0.392-0.535-0.588-0.973-0.588c-0.415,0-0.73,0.19-0.944,0.57 c-0.215,0.38-0.323,0.908-0.323,1.584c0,0.661,0.108,1.192,0.323,1.596c0.215,0.403,0.537,0.605,0.967,0.605 c0.43,0,0.749-0.202,0.956-0.605C31.309,25.054,31.413,24.522,31.413,23.861z\"\n                ></path>\n              </svg>\n              <span>Añadir a Apple Calendar</span>\n            </a>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem] lg:rounded-bl-[2rem]\"\n      >\n      </div>\n    </div>\n    <div class=\"relative lg:col-span-3\">\n      <div\n        class=\"relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] bg-white lg:rounded-tr-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]\"\n      >\n        <div class=\"relative h-80 w-full overflow-hidden\">\n          <Image\n            class=\"relative h-full w-full object-cover object-center [mask-image:linear-gradient(to_bottom,black_80%,transparent_100%)]\"\n            src=\"/images/aquopolis.webp\"\n            alt=\"Imagen de los toboganes en Aquopolis\"\n            width={1000}\n            height={513}\n          />\n        </div>\n        <div class=\"p-4 pt-4 sm:p-6 md:p-8 lg:p-10\">\n          <h3 class=\"text-primary text-center text-sm/4 font-semibold lg:text-left\">\n            La experiencia más refrescante\n          </h3>\n          <p\n            class=\"mx-auto mt-2 max-w-[50ch] text-center text-xs/5 text-balance text-gray-600 sm:text-sm/6 lg:mx-0 lg:text-left\"\n          >\n            Este año Lola Lolita Land se celebra en Aquopolis, Madrid, un parque acuático lleno de\n            toboganes y piscinas.\n          </p>\n          <div class=\"mt-4 flex flex-col items-stretch gap-2 lg:flex-row lg:items-center lg:gap-4\">\n            <a\n              class=\"group inline-flex min-h-[38px] w-full items-center justify-center space-x-1 rounded-lg bg-gradient-to-br from-[#ff0695]/90 to-[#ff0695] p-1 px-3 text-center text-xs/4 break-words text-white shadow-[inset_0px_0px_8px_rgba(255,255,255,0.2)] transition-all duration-300 ease-out hover:scale-105 hover:from-[#ff0695] hover:to-[#ff0695]/90 hover:shadow-[inset_0px_0px_12px_rgba(255,255,255,0.3)] active:scale-100 lg:flex-1\"\n              href=\"https://villanueva.aquopolis.es/condiciones-de-contratacion\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <svg\n                class=\"text-white transition-all\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <path d=\"M14 3v4a1 1 0 0 0 1 1h4\"></path>\n                <path d=\"M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z\"></path>\n                <path d=\"M9 9h1\"></path>\n                <path d=\"M9 13h6\"></path>\n                <path d=\"M9 17h6\"></path>\n              </svg>\n              <span>Condiciones de contratación</span>\n            </a>\n            <a\n              class=\"group inline-flex min-h-[38px] w-full items-center justify-center space-x-1 rounded-lg bg-gradient-to-br from-[#ff0695]/90 to-[#ff0695] p-1 px-3 text-center text-xs/4 break-words text-white shadow-[inset_0px_0px_8px_rgba(255,255,255,0.2)] transition-all duration-300 ease-out hover:scale-105 hover:from-[#ff0695] hover:to-[#ff0695]/90 hover:shadow-[inset_0px_0px_12px_rgba(255,255,255,0.3)] active:scale-100 lg:flex-1\"\n              href=\"https://villanueva.aquopolis.es/normas-de-funcionamiento\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <svg\n                class=\"text-white transition-all\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                <path d=\"M12 16v-4\"></path>\n                <path d=\"M12 8h.01\"></path>\n              </svg>\n              <span>Normas de funcionamiento</span>\n            </a>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 lg:rounded-tr-[2rem] lg:rounded-br-[2rem]\"\n      >\n      </div>\n    </div>\n  </div>\n</div>\n\n<script>\n  let index = 0\n  let interval = 1000\n\n  const rand = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min\n\n  const animate = (star: HTMLElement) => {\n    star.style.setProperty(\"--star-left\", `${rand(-10, 100)}%`)\n    star.style.setProperty(\"--star-top\", `${rand(-40, 80)}%`)\n\n    star.style.animation = \"none\"\n  }\n\n  for (const star of document.getElementsByClassName(\n    \"magic-star\"\n  ) as HTMLCollectionOf<HTMLElement>) {\n    setTimeout(\n      () => {\n        animate(star)\n\n        setInterval(() => animate(star), interval)\n      },\n      index++ * (interval / 3)\n    )\n  }\n</script>\n\n<style>\n  /* letter animation START  */\n  .magic-star {\n    --size: clamp(20px, 1.5vw, 30px);\n    animation: scale 700ms ease forwards;\n    display: block;\n    height: var(--size);\n    left: var(--star-left);\n    position: absolute;\n    top: var(--star-top);\n    width: var(--size);\n  }\n\n  .magic > .magic-star > svg {\n    animation: rotate 1000ms linear infinite;\n    display: block;\n    opacity: 0.7;\n  }\n\n  .magic > .magic-star > svg > path {\n    fill: #dfdf18;\n  }\n\n  .magic > .magic-text {\n    animation: background-pan 3s linear infinite;\n    background: linear-gradient(to right, #383acf, #61e2e5, #383acf, #383acf);\n    background-size: 200%;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    white-space: nowrap;\n  }\n</style>\n"
  },
  {
    "path": "src/sections/Map.astro",
    "content": "---\nimport Uber from \"@/assets/uber.webp\"\n\nimport LeafletMap from \"@/components/LeafletMap.astro\"\nimport BubbleBackground from \"@/components/BubbleBackground.astro\"\nimport WaveSeparator from \"@/components/WaveSeparator.astro\"\nimport { lolalolitalandGeoJSON, potaBlavaGeoJSON } from \"@/consts/geoJSONData.ts\"\nimport { Image } from \"astro:assets\"\n---\n\n<WaveSeparator bottomColor=\"var(--color-primary)\" hasBubbles />\n\n<section id=\"mapa\" class=\"bg-theme-blue relative py-12 pb-24\">\n  <BubbleBackground />\n  <h2\n    class=\"mx-auto flex flex-row items-center justify-center gap-x-4 py-4 text-left text-lg font-semibold tracking-tight text-balance text-white md:gap-x-8 md:py-6 md:text-2xl lg:py-8 lg:pb-4 lg:text-3xl xl:text-4xl\"\n  >\n    ¡Nos vemos aquí!\n  </h2>\n  <h3 class=\"flex flex-col items-center justify-center gap-1.5 text-white md:flex-row\">\n    Lola Lolita Land se celebra en <a\n      href=\"https://maps.app.goo.gl/QEWvh6e1cAZoqhCS7\"\n      target=\"_blank\"\n      rel=\"noopener\"\n      class=\"hover:text-primary animate-ease-in-out inline-block max-w-full rounded-lg bg-pink-200 px-2 py-1 text-center break-words text-pink-950 transition hover:bg-white\"\n      >Aquopolis Villanueva de la Cañada</a\n    >\n  </h3>\n\n  <div class=\"m-auto mt-4 flex max-w-[1315px] flex-row flex-wrap gap-8 p-4\">\n    <div class=\"relative h-[630px] min-w-[300px] flex-1 overflow-hidden rounded-[2rem] bg-black\">\n      <LeafletMap\n        latitude={40.45673263671421}\n        longitude={-3.990346247363024}\n        zoom={16}\n        tileLayer=\"https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png\"\n        attribution=`<a class=\"mr-5\" href=\"http://www.openstreetmap.org/\">OpenStreetMap</a>`\n        geoJSON={[\n          { data: lolalolitalandGeoJSON, color: \"var(--color-primary)\" },\n          { data: potaBlavaGeoJSON, color: \"green\" },\n        ]}\n      />\n    </div>\n    <div\n      class=\"flex w-full flex-shrink-0 flex-col gap-y-8 overflow-hidden md:w-[375px] lg:w-[550px]\"\n    >\n      <div class=\"flex flex-col gap-2 px-4\">\n        <h3\n          class=\"mb-2 flex w-fit flex-0 items-center gap-x-1 rounded-[2rem] bg-white px-4 py-2 text-base font-bold text-black\"\n        >\n          Cómo llegar con <a\n            target=\"_blank\"\n            rel=\"noopener\"\n            href=\"https://www.uber.com/es/es-es/ride/?utm_source=LolaLolitaLand\"\n          >\n            <Image\n              src={Uber}\n              title=\"Uber\"\n              alt=\"Uber\"\n              class=\"-mt-1 inline-block w-14 transition-transform group-hover:scale-110\"\n            />\n          </a>\n        </h3>\n        <p class=\"text-white\">\n          ¿Primera vez con UBER Teens? ¡Tienes un 50% de descuento pillando tu viaje a Lola Lolita\n          land!<br />\n          <span class=\"font-semibold\"\n            >Código: <span class=\"text-primary-light\">UBER_X_LOLALOLITA</span></span\n          >\n        </p>\n        <p class=\"text-xs text-white/90\">\n          Te recogen en la entrada del Aquopolis. Más fácil, ¡ni hecho por nosotras!\n        </p>\n      </div>\n      {/* TRANSPORTE PÚBLICO */}\n      <div class=\"flex flex-col gap-2 px-4\">\n        <h3\n          class=\"mb-2 flex w-fit flex-0 items-center gap-x-1 rounded-[2rem] bg-white px-4 py-2 text-base font-bold text-black\"\n        >\n          Llegar en transporte público\n        </h3>\n        <p class=\"text-white\">\n          Coge el bus 627 desde Moncloa (nivel -1, isla 1) y en nada estás en el parque.\n        </p>\n        <h4 class=\"font-semibold text-white\">¿Vienes de fuera de Madrid?</h4>\n        <p class=\"text-white\">\n          Desde Atocha puedes pillar el bus 001 (<span class=\"italic\">¡gratis!</span>) hasta\n          Moncloa, o bajarte en metro directo al intercambiador.\n        </p>\n      </div>\n      {/* COCHE PROPIO */}\n      <div class=\"flex flex-col gap-2 px-4\">\n        <h3\n          class=\"mb-2 flex w-fit flex-0 items-center gap-x-1 rounded-[2rem] bg-white px-4 py-2 text-base font-bold text-black\"\n        >\n          Cómo llegar en coche\n        </h3>\n        <ul class=\"list-disc pl-6 text-left text-white\">\n          <li><b>M-600:</b> conecta El Escorial con Brunete</li>\n          <li><b>M-501:</b> une la M-40 / M-50 con la M-600</li>\n          <li><b>M-503:</b> va desde Villanueva de la Cañada hasta la M-50 / Majadahonda</li>\n        </ul>\n        <p class=\"text-white\">Y tranqui, ¡Aquopolis tiene parking!</p>\n        <p class=\"mt-2 text-xs text-white\">\n          Pon buena música, activa el GPS y... ¡nos vemos en Lola Lolita land!\n        </p>\n      </div>\n    </div>\n  </div>\n</section>\n"
  },
  {
    "path": "src/sections/Rides.astro",
    "content": ""
  },
  {
    "path": "src/sections/Tickets.astro",
    "content": "---\nimport Marquee from \"@/components/Marquee.astro\"\nimport SponsorsBar from \"@/components/SponsorsBar.astro\"\n\nimport Ticket from \"public/icons/ticket.svg\"\nimport Clock from \"public/icons/clock.svg\"\n---\n\n<SponsorsBar />\n\n<section class=\"relative w-full overflow-hidden\" id=\"tickets\">\n  <div class=\"bg-primary-light mx-auto my-[3%] -ml-2 w-[120%] -rotate-3 text-white\">\n    <Marquee content={Array(8).fill(\"Entradas\")} />\n  </div>\n\n  <div class=\"relative container mx-auto px-4 py-12\">\n    <p\n      class=\"absolute inset-0 z-10 m-auto flex h-full w-full max-w-xl items-center justify-center text-center text-2xl font-semibold text-balance text-amber-200 text-shadow-[0_0_10px_#000]\"\n    >\n      ¡Gracias por asistir al evento! ¡Hasta el año que viene!\n    </p>\n\n    <div class=\"pointer-events-none mx-auto grid max-w-4xl grid-cols-1 gap-8 blur md:grid-cols-2\">\n      <!-- Día 1: 14 de junio -->\n      <div\n        class=\"ticket-card group relative overflow-hidden rounded-[calc(var(--radius-lg)+1px)] rounded-t-[calc(2rem+1px)] border-0 bg-gradient-to-br from-white to-[#fff8fb] backdrop-blur-sm transition-all duration-300 hover:translate-y-[-5px] md:rounded-t-[calc(var(--radius-lg)+1px)] md:rounded-tl-[calc(2rem+1px)] md:rounded-bl-[calc(2rem+1px)]\"\n      >\n        <div class=\"absolute inset-0 bg-gradient-to-br from-[#ff0695]/5 to-[#ff99d1]/10 opacity-50\">\n        </div>\n        <div\n          class=\"absolute -top-20 -right-20 h-40 w-40 rounded-full bg-[#ff0695]/10 blur-3xl transition-all duration-500 group-hover:bg-[#ff0695]/20\"\n        >\n        </div>\n        <div\n          class=\"absolute -bottom-24 -left-24 h-40 w-40 rounded-full bg-[#ff99d1]/10 blur-3xl transition-all duration-500 group-hover:bg-[#ff99d1]/20\"\n        >\n        </div>\n\n        <div class=\"relative p-8\">\n          <div class=\"flex items-start justify-between\">\n            <div>\n              <div class=\"inline-block rounded-full bg-[#ff0695]/10 px-3 py-1\">\n                <p class=\"text-primary text-xs font-semibold tracking-wide uppercase\">Día 1</p>\n              </div>\n              <div class=\"mt-4 flex items-center gap-3\">\n                <h3\n                  class=\"bg-gradient-to-r from-[#ff0695] to-[#ff99d1] bg-clip-text text-5xl font-bold text-transparent\"\n                >\n                  14\n                </h3>\n                <div>\n                  <p class=\"text-lg font-medium text-gray-800\">de junio</p>\n                  <p class=\"text-base text-gray-600\">Sábado</p>\n                </div>\n              </div>\n            </div>\n            <div class=\"rounded-full bg-white/80 p-3 shadow-md\">\n              <Ticket title=\"ticket\" class=\"h-6 w-6 -rotate-12 fill-[#ff0695]\" />\n            </div>\n          </div>\n\n          <div class=\"mt-8\">\n            <a\n              href=\"https://lolalolitaland.deporticket.com/web-evento/11028-lola-lolita-land-14\"\n              class=\"tickets-button relative flex w-full items-center justify-center gap-3 rounded-full bg-gradient-to-r from-[#ff0695] via-[#ff99d1] to-[#ff0695] px-4 py-3 font-bold text-white shadow-lg shadow-[#ff0695]/30 transition-all hover:scale-105 hover:shadow-xl hover:shadow-[#ff0695]/40\"\n              tabindex=\"0\"\n              aria-label=\"Comprar entrada para Lola Lolita Land para el 14 de junio (enlace externo, se abre en una pestaña nueva)\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <Ticket\n                aria-hidden=\"true\"\n                focusable=\"false\"\n                class=\"hidden h-5 w-5 -rotate-12 animate-bounce fill-white sm:inline-block\"\n              />\n              <span class=\"text-sm sm:text-base\">Comprar entrada</span>\n            </a>\n          </div>\n        </div>\n      </div>\n\n      <!-- Día 2: 15 de junio -->\n      <div\n        class=\"ticket-card group pointer-events-none relative overflow-hidden rounded-[calc(var(--radius-lg)+1px)] rounded-b-[calc(2rem+1px)] border-0 bg-gradient-to-br from-white to-[#fff8fb] backdrop-blur-sm transition-all duration-300 hover:translate-y-[-5px] md:rounded-tr-[calc(2rem+1px)] md:rounded-b-[calc(var(--radius-lg)+1px)] md:rounded-br-[calc(2rem+1px)]\"\n      >\n        <div class=\"absolute inset-0 bg-gradient-to-br from-[#ff0695]/5 to-[#ff99d1]/10 opacity-50\">\n        </div>\n        <div\n          class=\"absolute -top-20 -right-20 h-40 w-40 rounded-full bg-[#ff0695]/10 blur-3xl transition-all duration-500 group-hover:bg-[#ff0695]/20\"\n        >\n        </div>\n        <div\n          class=\"absolute -bottom-24 -left-24 h-40 w-40 rounded-full bg-[#ff99d1]/10 blur-3xl transition-all duration-500 group-hover:bg-[#ff99d1]/20\"\n        >\n        </div>\n\n        <div class=\"relative p-8\">\n          <div class=\"flex items-start justify-between\">\n            <div>\n              <div class=\"inline-block rounded-full bg-[#ff0695]/10 px-3 py-1\">\n                <p class=\"text-primary text-xs font-semibold tracking-wide uppercase\">Día 2</p>\n              </div>\n              <div class=\"mt-4 flex items-center gap-3\">\n                <h3\n                  class=\"bg-gradient-to-r from-[#ff0695] to-[#ff99d1] bg-clip-text text-5xl font-bold text-transparent\"\n                >\n                  15\n                </h3>\n                <div>\n                  <p class=\"text-lg font-medium text-gray-800\">de junio</p>\n                  <p class=\"text-base text-gray-600\">Domingo</p>\n                </div>\n              </div>\n            </div>\n            <div class=\"rounded-full bg-white/80 p-3 shadow-md\">\n              <Ticket title=\"ticket\" class=\"h-6 w-6 -rotate-12 fill-[#ff0695]\" />\n            </div>\n          </div>\n\n          <div class=\"mt-8\">\n            <a\n              href=\"https://lolalolitaland.deporticket.com/web-evento/11215-lola-lolita-land-15\"\n              class=\"tickets-button relative flex w-full items-center justify-center gap-3 rounded-full bg-gradient-to-r from-[#ff0695] via-[#ff99d1] to-[#ff0695] px-4 py-3 font-bold text-white shadow-lg shadow-[#ff0695]/30 transition-all hover:scale-105 hover:shadow-xl hover:shadow-[#ff0695]/40\"\n              tabindex=\"0\"\n              aria-label=\"Comprar entrada para Lola Lolita Land para el 15 de junio (enlace externo, se abre en una pestaña nueva)\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <Ticket\n                aria-hidden=\"true\"\n                focusable=\"false\"\n                class=\"hidden h-5 w-5 -rotate-12 animate-bounce fill-white sm:inline-block\"\n              />\n              <span class=\"text-sm sm:text-base\">Comprar entrada</span>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <style>\n    .tickets-button {\n      background-size: 200% 100%;\n      /* animation: shimmer 3s linear infinite; */\n      position: relative;\n      overflow: hidden;\n    }\n\n    /* .tickets-button::before {\n      content: \"\";\n      position: absolute;\n      top: -50%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);\n      transform: rotate(30deg);\n      animation: shine 3s linear infinite;\n    } */\n\n    @keyframes shimmer {\n      0% {\n        background-position: 0% 0;\n      }\n      100% {\n        background-position: 200% 0;\n      }\n    }\n\n    @keyframes shine {\n      0% {\n        transform: translateX(-100%) rotate(30deg);\n      }\n      100% {\n        transform: translateX(100%) rotate(30deg);\n      }\n    }\n  </style>\n</section>\n"
  },
  {
    "path": "src/styles/global.css",
    "content": "@import \"tailwindcss\";\n@plugin \"@midudev/tailwind-animations\";\n\n@theme {\n  --color-primary-light: #ff99d1;\n  --color-primary: #ff0695;\n  --color-primary-dark: #a80060;\n\n  --color-theme-blue: #383acf;\n  --color-theme-blue-light: #66dfff;\n  --color-theme-cyan: #61e2e5;\n  --color-theme-green: #2b8364;\n  --color-theme-green-light: #98d354;\n\n  --font-special: \"Amertha\", sans-serif;\n\n  /* animations */\n\n  --animate-marquee: slide-left 10s linear infinite;\n  --animate-shiny: shiny 5s linear forwards infinite;\n\n  @keyframes slide-left {\n    0% {\n      transform: translateX(0);\n    }\n\n    100% {\n      transform: translateX(calc(-100% - 1rem));\n    }\n  }\n\n  @keyframes shiny {\n    from {\n      background-position: 0 0;\n    }\n\n    to {\n      background-position: -200% 0;\n    }\n  }\n}\n\n@layer {\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: var(--color-primary-light);\n    border: 1px solid #fff;\n    border-radius: 3px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: #ff0593a8;\n    border: 1px solid #fff;\n    border-radius: 3px;\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: var(--color-primary);\n  }\n}\n\n@font-face {\n  font-family: \"Amertha\";\n  src: url(\"/fonts/amertha.woff2\") format(\"woff2\");\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\nbody {\n  font-family: \"Poppins\", sans-serif;\n  transition: background-color 1000ms;\n}\n\n.text-stroke {\n  -webkit-text-stroke: 0.1rem white;\n}\n"
  },
  {
    "path": "tailwind.config.js",
    "content": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\"./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}\"],\n  theme: {\n    extend: {\n      keyframes: {\n        shimmer: {\n          '0%': { backgroundPosition: '0% 0' },\n          '100%': { backgroundPosition: '200% 0' }\n        },\n        shine: {\n          '0%': { transform: 'translateX(-100%) rotate(30deg)' },\n          '100%': { transform: 'translateX(100%) rotate(30deg)' }\n        }\n      },\n      animation: {\n        shimmer: 'shimmer 3s linear infinite',\n        shine: 'shine 3s linear infinite'\n      },\n      rotate: {\n        '30': '30deg'\n      }\n    },\n  },\n  plugins: [],\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"extends\": \"astro/tsconfigs/strict\",\n  \"include\": [\n    \".astro/types.d.ts\",\n    \"**/*\"\n  ],\n  \"exclude\": [\n    \"dist\"\n  ],\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/*\": [\n        \"./src/*\"\n      ]\n    }\n  }\n}"
  }
]