# AudioManga

> Markdown mirror of DialtoneApp's public top-site detail page for `audiomangaop.com`.

URL: https://dialtoneapp.com/top-sites/audiomangaop.com/index.md
Canonical HTML: https://dialtoneapp.com/top-sites/audiomangaop.com

## Summary

- Domain: `audiomangaop.com`
- Website: https://audiomangaop.com
- Description: ai readable | score 24 | purchase read only
- Label: ai_readable
- Payment surface: Not available
- Purchase boundary: read_only
- Control boundary: unknown
- Rank: 760863

## robots

Not found.

## llms

~~~text
<!DOCTYPE html>
<html lang="es">
<head>
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="AudioManga de One Piece">
  <meta name="twitter:description" content="Lee los capítulos de OnePiece con música, fanarts y más. ¡Una experiencia inmersiva de One Piece hecha por fans!">
  <meta name="twitter:image" content="https://audiomangaop.com/icon/meta_index.webp">
  <meta name="twitter:url" content="https://audiomangaop.com/">

  <meta property="og:title" content="AudioManga de One Piece" />
  <meta property="og:description" content="Lee los capítulos de OnePiece con música, fanarts y más. ¡Una experiencia inmersiva de One Piece hecha por fans!" />
  <meta property="og:image" content="https://audiomangaop.com/icon/meta_index.webp" />
  <meta property="og:url" content="https://audiomangaop.com/" />
  <meta property="og:type" content="website" />

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AudioManga</title>
<link rel="stylesheet" href="/styles.css"/>
<link rel="icon" type="image/webp" href="/icon/logo_window.webp">

<script>
  (function prepareIndexFirstPaint() {
    document.documentElement.classList.add('i18n-pending');
    const totalBackgrounds = 77;
    const randomIndex = Math.floor(Math.random() * totalBackgrounds) + 1;
    const formattedIndex = String(randomIndex).padStart(2, '0');
    window.__indexRandomBg = `/backgrounds/background-${formattedIndex}.png`;
    document.documentElement.style.setProperty('--index-random-bg', `url("${window.__indexRandomBg}")`);
  })();
</script>

<style>
  #index-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--index-random-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  z-index: -1; /* más bajo que el ::before que tiene -1 */
  pointer-events: none;
  transition: background-image 0.5s ease;
  }
</style>

<style>
  body.index::before {
    display: none !important;
  }

  .i18n-pending .i18n-trans {
    visibility: hidden;
  }

  .language-selector select {
    background: rgba(0,0,0,0.5);
    color: white;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 5px;
    font-size: 14px;
  }

  .language-selector select:focus {
    outline: none;
    border-color: #b48aff;
  }
 body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  transition: background 0.6s ease;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 60px;
  gap: 20px;
  flex-wrap: wrap;
}

/* ===== CARDS IZQUIERDA ===== */
.cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-width: 260px;
  max-width: 600px;
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  width: 500px;
  transition: transform 0.3s, box-shadow 0.3s;
  border: 2px solid var(--blanco);
}

.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  filter: brightness(0.85);
  transition: filter 0.3s;
}

.card span {
  position: absolute;
  bottom: 10px;
  left: 14px;
  font-size: 48px;
  font-family: Impact, sans-serif;
  text-shadow: 0 2px 5px rgba(0,0,0,0.6);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.card:hover img {
  filter: brightness(1);
}

.card.active {
  outline: 3px solid #b48aff;
  transform: scale(1.03);
}

/* ===== CONTENIDO DERECHA ===== */
.content {
  flex: 1.2;
  max-width: 600px;
}

.content.jojos-selected {
  max-width: 750px;
}

.content h1 {
  font-size: 60px;
  line-height: 1.2;
  font-family: Impact, sans-serif;
  letter-spacing: 0.05em;
}

.content p {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.6;
  color: #ccc;
}

.content .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 25px;
}

.content .buttons a {
  transition: background 0.3s;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1495px){
    .card {
    width: 400px;
  }
  }

@media (max-width: 1403px){
    .card {
    width: 400px;
  }
  }

  @media (max-width: 1346px){
    .card {
    width: 400px;
  }
  }

  @media (max-width: 1304px){
    .card {
    width: 350px;
  }

  }
   @media (max-width: 1290px){
    .card {
    width: 350px;
  }

  }
   @media (max-width: 1235px){
    .card {
    width: 250px;
  }
  }

  @media (max-width: 1100px){
    .card {
    width: 200px;

  }
    .cards{
      min-width: 0;
    }
  }

/* Tablets y pantallas medianas */
@media (max-width: 1024px) {
  .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
  }

  .cards {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .card {
    width: 150px;
  }

  .card span{
    font-size: 30px;
  }

  .content {
    max-width: 90%;
  }

  .content h1 {
    font-size: 30px;
  }
}

/* Móviles grandes */
@media (max-width: 768px) {
  .card {
    width: 150px;
  }

  .card span {
    font-size: 30px;
  }

  .content h1 {
    font-size: 36px;
  }

  .content p {
    font-size: 16px;
  }

  .content .buttons a {
    padding: 8px 18px;
    font-size: 0.9rem;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .cards {
    align-items: center;
    padding: 0px;
  }

  .card {
    height: 100px;
    max-width: 320px;
  }

  .card span {
    font-size: 26px;
  }

  .content h1 {
    font-size: 28px;
  }

  .content p {
    font-size: 15px;
  }

  .content .buttons {
    flex-direction: column;
    align-items: center;
  }

  .content .buttons a {
    width: 80%;
    text-align: center;
  }
}

</style>
</head>
<body class="index">
  <div id="index-bg"></div>
  <header class="header">
    <div class="logo-nav">
      <div class="logo">
        <a href="/index.html" title="Ir al inicio" class="btn-inicio">
          <img src="/icon/logo.webp" alt="AudioManga Logo" class="icon icon-default"/>
        </a>
      </div>
       <div class="menu-wrapper">
        <button class="hamburger" aria-label="Menú">&#9776;</button>
        <nav class="nav-links i18n-trans" id="navDropdown">
          <a href="/proyecto.html" class="no-close icon-link">
             <img src="/icon/book.svg" alt="">
            PROYECTO
          </a>
          <a href="" target="_blank" rel="noopener noreferrer" class="no-close icon-link">
            <img src="/icon/discord.svg" alt="Discord">DISCORD
          </a>
          <a href="https://x.com/audiomangaop" class="no-close icon-link" target="_blank" rel="noopener noreferrer">
            <img src="/icon/twitter.svg" alt="Twitter">TWITTER
          </a>
          <a href="https://www.patreon.com/audiomangaop" class="no-close icon-link" target="_blank" rel="noopener noreferrer">
            <img src="/icon/patreon.svg" alt="Patreon">PATREON
          </a>
        </nav>
        </div>
    </div>
    <div class="search-box" style="margin-left: 20px;">
            <input id="chapterSearchInput" type="text" placeholder="One Piece 1150" class="search-box"/>
            <button id="chapterSearchBtn"><img src="/icon/search_icon.png" alt="" title="Haz clic para buscar" /></button>
    </div>
    <div class="language-selector" style="margin-left: 20px;" id="languageSelectorContainer">
    </div>
  </header>
<main class="main i18n-trans">

  <div class="container">
 <!-- IZQUIERDA -->
  <div class="cards">
    <div class="card onepiece" data-series="onepiece" tabindex="0"
      data-bg="linear-gradient(135deg, #20023d, #6f1aff)"
      data-bg-img="/icon/background.png"
      data-title="ONE PIECE"
      data-desc="Vive las aventuras de Luffy y su tripulación en busca del One Piece. Una experiencia inmersiva llena de música, emociones y batallas legendarias."

      data-link2="/onepiece"
      data-link3="/chapters/chapter1">
      <span>ONE PIECE</span>
    </div>

    <div class="card berserk" data-series="berserk" tabindex="0"
      data-bg="linear-gradient(135deg, #1b0f0f, #6b0000)"
      data-bg-img="/icon/background-berserk.png"
      data-title="BERSERK"
      data-desc="Adéntrate en el oscuro mundo de Guts, el Espadachín Negro. Una historia brutal y trágica acompañada de un ambiente sonoro inolvidable."

      data-link2="/berserk"
      data-link3="/berserk/chapters/chapter1">
      <span>BERSERK</span>
    </div>

    <div class="card jojos" data-series="jojos" tabindex="0"
      data-bg="linear-gradient(135deg, #2d1b4e, #9d4edd)"
      data-bg-img="/icon/background-jojos.png"
      data-title="JOJO'S BIZARRE ADVENTURE"
      data-desc="Sumérgete en la épica saga de la familia Joestar a través de generaciones. Una aventura extravagante llena de estilo, energía desbordante y combates tan únicos como inolvidables."

      data-link2="/jojos"
      data-link3="/jojos/chapters/phantom_blood/chapter1">
      <span>JOJO'S</span>
    </div>

    <!--<div class="card" tabindex="0"
      data-bg="linear-gradient(135deg, #001b25, #0080b5)"
      data-title="PRÓXIMAMENTE"
      data-desc="PRÓXIMAMENTE"
      data-link1="https://www.audiomangaop.com/proximamente/ultimo"
      data-link2="https://www.audiomangaop.com/proximamente/arcos"
      data-link3="https://www.audiomangaop.com/proximamente/inicio">
      <span>PRÓXIMAMENTE</span>
    </div>-->
  </div>

  <!-- DERECHA -->
  <div class="content i18n-trans" id="info">
    <h1>LA EXPERIENCIA DEL MANGA A OTRO NIVEL</h1>
    <p>Explora los mejores mangas con banda sonora, efectos de sonido y fanarts. Sumérgete en una lectura totalmente diferente creada por fans para fans.</p>
    <div class="buttons">
      <a href="/proyecto.html" class="btn-primary">CONOCE MÁS</a>
      <a href="https://www.patreon.com/audiomangaop" target="_blank" class="btn-tertiary">ENTÉRATE DE TODO</a>
    </div>
  </div>
</div>

<!-- Script para actualizar el contenido de los cards-->
<script>
  const cards = document.querySelectorAll('.card');
  const content = document.getElementById('info');
  const bgDiv = document.getElementById('index-bg');

  const backgroundImages = [
    '/backgrounds/background-01.png',
    '/backgrounds/background-02.png',
    '/backgrounds/background-03.png',
    '/backgrounds/background-04.png',
    '/backgrounds/background-05.png',
    '/backgrounds/background-06.png',
    '/backgrounds/background-07.png',
    '/backgrounds/background-08.png',
    '/backgrounds/background-09.png',
    '/backgrounds/background-10.png',
    '/backgrounds/background-11.png',
    '/backgrounds/background-12.png',
    '/backgrounds/background-13.png',
    '/backgrounds/background-14.png',
    '/backgrounds/background-15.png',
    '/backgrounds/background-16.png',
    '/backgrounds/background-17.png',
    '/backgrounds/background-18.png',
    '/backgrounds/background-19.png',
    '/backgrounds/background-20.png',
    '/backgrounds/background-21.png',
    '/backgrounds/background-22.png',
    '/backgrounds/background-23.png',
    '/backgrounds/background-24.png',
    '/backgrounds/background-25.png',
    '/backgrounds/background-26.png',
    '/backgrounds/background-27.png',
    '/backgrounds/background-28.png',
    '/backgrounds/background-29.png',
    '/backgrounds/background-30.png',
    '/backgrounds/background-31.png',
    '/backgrounds/background-32.png',
    '/backgrounds/background-33.png',
    '/backgrounds/background-34.png',
    '/backgrounds/background-35.png',
    '/backgrounds/background-36.png',
    '/backgrounds/background-37.png',
    '/backgrounds/background-38.png',
    '/backgrounds/background-39.png',
    '/backgrounds/background-40.png',
    '/backgrounds/background-41.png',
    '/backgrounds/background-42.png',
    '/backgrounds/background-43.png',
    '/backgrounds/background-44.png',
    '/backgrounds/background-45.png',
    '/backgrounds/background-46.png',
    '/backgrounds/background-47.png',
    '/backgrounds/background-48.png',
    '/backgrounds/background-49.png',
    '/backgrounds/background-50.png',
    '/backgrounds/background-51.png',
    '/backgrounds/background-52.png',
    '/backgrounds/background-53.png',
    '/backgrounds/background-54.png',
    '/backgrounds/background-55.png',
    '/backgrounds/background-56.png',
    '/backgrounds/background-57.png',
    '/backgrounds/background-58.png',
    '/backgrounds/background-59.png',
    '/backgrounds/background-60.png',
    '/backgrounds/background-61.png',
    '/backgrounds/background-62.png',
    '/backgrounds/background-63.png',
    '/backgrounds/background-64.png',
    '/backgrounds/background-65.png',
    '/backgrounds/background-66.png',
    '/backgrounds/background-67.png',
    '/backgrounds/background-68.png',
    '/backgrounds/background-69.png',
    '/backgrounds/background-70.png',
    '/backgrounds/background-71.png',
    '/backgrounds/background-72.png',
    '/backgrounds/background-73.png',
    '/backgrounds/background-74.png',
    '/backgrounds/background-75.png',
    '/backgrounds/background-76.png',
    '/backgrounds/background-77.png'
  ];

  // Función para obtener un fondo random
  function getRandomBackground() {
    return backgroundImages[Math.floor(Math.random() * backgroundImages.length)];
  }

  // Aplicar fondo random al cargar la página
  bgDiv.style.backgroundImage = `url(${window.__indexRandomBg || getRandomBackground()})`;

  let lastChapters = {};
  fetch('/last.json')
    .then(res => res.json())
    .then(data => {
      lastChapters = data;
    })
    .catch(err => console.error('Error cargando last.json:', err));


  function updateCardContent(card) {
    // Quitar selección anterior
    cards.forEach(c => c.classList.remove('active'));

    // Activar la seleccionada
    card.classList.add('active');

    // Cambiar fondo de página - usar random si no hay fondo específico
    const bgImage = card.getAttribute('data-bg-img');
    if (bgImage && bgImage !== '/icon/background.png') {
      // Si es Berserk u otro con fondo específico
      bgDiv.style.backgroundImage = `url(${bgImage})`;
    } else {
      // Si es One Piece o sin fondo específico, usar random
      bgDiv.style.backgroundImage = `url(${getRandomBackground()})`;
    }

    // Cambiar contenido de la derecha
    const title = card.getAttribute('data-title');
    const series = card.getAttribute('data-series');
    let desc;

    content.classList.toggle('jojos-selected', series === 'jojos');
    
    // Obtener descripción traducida según la serie
    if (series === 'onepiece') {
      desc = t('indexOnepieceDesc');
    } else if (series === 'berserk') {
      desc = t('indexBerserkDesc');
    } else if (series === 'jojos') {
      desc = t('indexJojosDesc');
    } else {
      desc = card.getAttribute('data-desc');
    }

    const fallbackSeriesData = {
      onepiece: { last: 1, base: '/chapters/chapter' },
      berserk: { last: 1, base: '/berserk/chapters/chapter' },
      jojos: { last: 1, base: '/jojos/chapters/phantom_blood/chapter' }
    };
    const serieData = lastChapters[series] || fallbackSeriesData[series] || fallbackSeriesData.onepiece;
    const link1 = `${serieData.base}${serieData.last}`;
    //const link1 = card.getAttribute('data-link1');
    const link2 = card.getAttribute('data-link2');
    const link3 = card.getAttribute('data-link3');

    content.innerHTML = `
      <h1>${title}</h1>
      <p>${desc}</p>
      <div class="buttons">
        <a href="${link1}" class="btn-primary">${t('ultimoCapitulo')}
          <img src="/icon/play_circle.png" alt="" class="icon icon-default" />
        </a>
        <a href="${link2}" class="btn-secondary">${t('verArcos')}</a>
        <a href="${link3}" class="btn-tertiary">${t('comenzarLeer')}</a>
      </div>
    `;

    // 👇 Desplazamiento suave en móviles
    if (window.innerWidth <= 768) {
      const yOffset = -60; // margen opcional si hay header fijo
      const y = content.getBoundingClientRect().top + window.pageYOffset + yOffset;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  }

  // Soporte para clic
  cards.forEach(card => {
    card.addEventListener('click', () => updateCardContent(card));

    // Soporte para teclado
    card.addEventListener('keydown', e => {
      if (e.key === 'Enter' || e.key === ' ') { // enter o espacio
        e.preventDefault();
        updateCardContent(card);
      }
    });
  });
</script>


</main>

  <!-- Script de internacionalización -->
  <script src="/i18n.js"></script>

  <!-- Script de inicialización de idioma -->
  <script>
    const container = document.getElementById('languageSelectorContainer');
    const selector = createLanguageSelector();
    container.appendChild(selector);

    function updatePageLanguage() {
      document.documentElement.lang = currentLang;
      const homeBtn = document.querySelector('.btn-inicio');
      if (homeBtn) homeBtn.title = t('irAInicio');
      document.querySelector('h1').textContent = t('title');
      document.querySelector('.content p').textContent = t('description');
      document.querySelectorAll('.buttons a').forEach(btn => {
        if (btn.href.includes('proyecto')) btn.textContent = t('conoceMas');
        if (btn.href.includes('patreon')) btn.textContent = t('enteraTe');
      });
      document.querySelectorAll('#navDropdown a').forEach(a => {
        if (a.textContent.includes('PROYECTO')) a.innerHTML = `<img src="/icon/book.svg" alt=""> ${t('proyecto')}`;
      });
      // Traducir footer
      const footerDiv = document.getElementById('footerdiv');
      if (footerDiv) {
        footerDiv.textContent = t('derechos');
      }
      document.documentElement.classList.remove('i18n-pending');
    }

    // Ejecutar cuando el DOM esté completamente cargado
    document.addEventListener('DOMContentLoaded', updatePageLanguage);
    // También ejecutar inmediatamente por si ya está cargado
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', updatePageLanguage);
    } else {
      updatePageLanguage();
    }
  </script>

  <!-- Script para el menú hamburguesa en moviles -->
  <script src="/header.js"></script>

   <!-- Script para el buscador -->
  <script src="/search.js"></script>

  <!-- Script que gestiona las cookies -->
  <script src="/cookies.js"></script>

  <footer style="text-align:center;padding:18px 10px;font-size:14px;color:#aaa;">
    <div id="footerdiv" class="i18n-trans">Audiomanga © 2025. Todos los derechos reservados.</div>
  </footer>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v8c78df7c7c0f484497ecbca7046644da1771523124516" integrity="sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==" data-cf-beacon='{"version":"2024.11.0","token":"02600cfac25d42b6a5edf525bb720e6c","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>

</html>
~~~

## llms-full

~~~text
<!DOCTYPE html>
<html lang="es">
<head>
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="AudioManga de One Piece">
  <meta name="twitter:description" content="Lee los capítulos de OnePiece con música, fanarts y más. ¡Una experiencia inmersiva de One Piece hecha por fans!">
  <meta name="twitter:image" content="https://audiomangaop.com/icon/meta_index.webp">
  <meta name="twitter:url" content="https://audiomangaop.com/">

  <meta property="og:title" content="AudioManga de One Piece" />
  <meta property="og:description" content="Lee los capítulos de OnePiece con música, fanarts y más. ¡Una experiencia inmersiva de One Piece hecha por fans!" />
  <meta property="og:image" content="https://audiomangaop.com/icon/meta_index.webp" />
  <meta property="og:url" content="https://audiomangaop.com/" />
  <meta property="og:type" content="website" />

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AudioManga</title>
<link rel="stylesheet" href="/styles.css"/>
<link rel="icon" type="image/webp" href="/icon/logo_window.webp">

<script>
  (function prepareIndexFirstPaint() {
    document.documentElement.classList.add('i18n-pending');
    const totalBackgrounds = 77;
    const randomIndex = Math.floor(Math.random() * totalBackgrounds) + 1;
    const formattedIndex = String(randomIndex).padStart(2, '0');
    window.__indexRandomBg = `/backgrounds/background-${formattedIndex}.png`;
    document.documentElement.style.setProperty('--index-random-bg', `url("${window.__indexRandomBg}")`);
  })();
</script>

<style>
  #index-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--index-random-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  z-index: -1; /* más bajo que el ::before que tiene -1 */
  pointer-events: none;
  transition: background-image 0.5s ease;
  }
</style>

<style>
  body.index::before {
    display: none !important;
  }

  .i18n-pending .i18n-trans {
    visibility: hidden;
  }

  .language-selector select {
    background: rgba(0,0,0,0.5);
    color: white;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 5px;
    font-size: 14px;
  }

  .language-selector select:focus {
    outline: none;
    border-color: #b48aff;
  }
 body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  transition: background 0.6s ease;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 60px;
  gap: 20px;
  flex-wrap: wrap;
}

/* ===== CARDS IZQUIERDA ===== */
.cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-width: 260px;
  max-width: 600px;
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  width: 500px;
  transition: transform 0.3s, box-shadow 0.3s;
  border: 2px solid var(--blanco);
}

.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  filter: brightness(0.85);
  transition: filter 0.3s;
}

.card span {
  position: absolute;
  bottom: 10px;
  left: 14px;
  font-size: 48px;
  font-family: Impact, sans-serif;
  text-shadow: 0 2px 5px rgba(0,0,0,0.6);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.card:hover img {
  filter: brightness(1);
}

.card.active {
  outline: 3px solid #b48aff;
  transform: scale(1.03);
}

/* ===== CONTENIDO DERECHA ===== */
.content {
  flex: 1.2;
  max-width: 600px;
}

.content.jojos-selected {
  max-width: 750px;
}

.content h1 {
  font-size: 60px;
  line-height: 1.2;
  font-family: Impact, sans-serif;
  letter-spacing: 0.05em;
}

.content p {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.6;
  color: #ccc;
}

.content .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 25px;
}

.content .buttons a {
  transition: background 0.3s;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1495px){
    .card {
    width: 400px;
  }
  }

@media (max-width: 1403px){
    .card {
    width: 400px;
  }
  }

  @media (max-width: 1346px){
    .card {
    width: 400px;
  }
  }

  @media (max-width: 1304px){
    .card {
    width: 350px;
  }

  }
   @media (max-width: 1290px){
    .card {
    width: 350px;
  }

  }
   @media (max-width: 1235px){
    .card {
    width: 250px;
  }
  }

  @media (max-width: 1100px){
    .card {
    width: 200px;

  }
    .cards{
      min-width: 0;
    }
  }

/* Tablets y pantallas medianas */
@media (max-width: 1024px) {
  .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
  }

  .cards {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .card {
    width: 150px;
  }

  .card span{
    font-size: 30px;
  }

  .content {
    max-width: 90%;
  }

  .content h1 {
    font-size: 30px;
  }
}

/* Móviles grandes */
@media (max-width: 768px) {
  .card {
    width: 150px;
  }

  .card span {
    font-size: 30px;
  }

  .content h1 {
    font-size: 36px;
  }

  .content p {
    font-size: 16px;
  }

  .content .buttons a {
    padding: 8px 18px;
    font-size: 0.9rem;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .cards {
    align-items: center;
    padding: 0px;
  }

  .card {
    height: 100px;
    max-width: 320px;
  }

  .card span {
    font-size: 26px;
  }

  .content h1 {
    font-size: 28px;
  }

  .content p {
    font-size: 15px;
  }

  .content .buttons {
    flex-direction: column;
    align-items: center;
  }

  .content .buttons a {
    width: 80%;
    text-align: center;
  }
}

</style>
</head>
<body class="index">
  <div id="index-bg"></div>
  <header class="header">
    <div class="logo-nav">
      <div class="logo">
        <a href="/index.html" title="Ir al inicio" class="btn-inicio">
          <img src="/icon/logo.webp" alt="AudioManga Logo" class="icon icon-default"/>
        </a>
      </div>
       <div class="menu-wrapper">
        <button class="hamburger" aria-label="Menú">&#9776;</button>
        <nav class="nav-links i18n-trans" id="navDropdown">
          <a href="/proyecto.html" class="no-close icon-link">
             <img src="/icon/book.svg" alt="">
            PROYECTO
          </a>
          <a href="" target="_blank" rel="noopener noreferrer" class="no-close icon-link">
            <img src="/icon/discord.svg" alt="Discord">DISCORD
          </a>
          <a href="https://x.com/audiomangaop" class="no-close icon-link" target="_blank" rel="noopener noreferrer">
            <img src="/icon/twitter.svg" alt="Twitter">TWITTER
          </a>
          <a href="https://www.patreon.com/audiomangaop" class="no-close icon-link" target="_blank" rel="noopener noreferrer">
            <img src="/icon/patreon.svg" alt="Patreon">PATREON
          </a>
        </nav>
        </div>
    </div>
    <div class="search-box" style="margin-left: 20px;">
            <input id="chapterSearchInput" type="text" placeholder="One Piece 1150" class="search-box"/>
            <button id="chapterSearchBtn"><img src="/icon/search_icon.png" alt="" title="Haz clic para buscar" /></button>
    </div>
    <div class="language-selector" style="margin-left: 20px;" id="languageSelectorContainer">
    </div>
  </header>
<main class="main i18n-trans">

  <div class="container">
 <!-- IZQUIERDA -->
  <div class="cards">
    <div class="card onepiece" data-series="onepiece" tabindex="0"
      data-bg="linear-gradient(135deg, #20023d, #6f1aff)"
      data-bg-img="/icon/background.png"
      data-title="ONE PIECE"
      data-desc="Vive las aventuras de Luffy y su tripulación en busca del One Piece. Una experiencia inmersiva llena de música, emociones y batallas legendarias."

      data-link2="/onepiece"
      data-link3="/chapters/chapter1">
      <span>ONE PIECE</span>
    </div>

    <div class="card berserk" data-series="berserk" tabindex="0"
      data-bg="linear-gradient(135deg, #1b0f0f, #6b0000)"
      data-bg-img="/icon/background-berserk.png"
      data-title="BERSERK"
      data-desc="Adéntrate en el oscuro mundo de Guts, el Espadachín Negro. Una historia brutal y trágica acompañada de un ambiente sonoro inolvidable."

      data-link2="/berserk"
      data-link3="/berserk/chapters/chapter1">
      <span>BERSERK</span>
    </div>

    <div class="card jojos" data-series="jojos" tabindex="0"
      data-bg="linear-gradient(135deg, #2d1b4e, #9d4edd)"
      data-bg-img="/icon/background-jojos.png"
      data-title="JOJO'S BIZARRE ADVENTURE"
      data-desc="Sumérgete en la épica saga de la familia Joestar a través de generaciones. Una aventura extravagante llena de estilo, energía desbordante y combates tan únicos como inolvidables."

      data-link2="/jojos"
      data-link3="/jojos/chapters/phantom_blood/chapter1">
      <span>JOJO'S</span>
    </div>

    <!--<div class="card" tabindex="0"
      data-bg="linear-gradient(135deg, #001b25, #0080b5)"
      data-title="PRÓXIMAMENTE"
      data-desc="PRÓXIMAMENTE"
      data-link1="https://www.audiomangaop.com/proximamente/ultimo"
      data-link2="https://www.audiomangaop.com/proximamente/arcos"
      data-link3="https://www.audiomangaop.com/proximamente/inicio">
      <span>PRÓXIMAMENTE</span>
    </div>-->
  </div>

  <!-- DERECHA -->
  <div class="content i18n-trans" id="info">
    <h1>LA EXPERIENCIA DEL MANGA A OTRO NIVEL</h1>
    <p>Explora los mejores mangas con banda sonora, efectos de sonido y fanarts. Sumérgete en una lectura totalmente diferente creada por fans para fans.</p>
    <div class="buttons">
      <a href="/proyecto.html" class="btn-primary">CONOCE MÁS</a>
      <a href="https://www.patreon.com/audiomangaop" target="_blank" class="btn-tertiary">ENTÉRATE DE TODO</a>
    </div>
  </div>
</div>

<!-- Script para actualizar el contenido de los cards-->
<script>
  const cards = document.querySelectorAll('.card');
  const content = document.getElementById('info');
  const bgDiv = document.getElementById('index-bg');

  const backgroundImages = [
    '/backgrounds/background-01.png',
    '/backgrounds/background-02.png',
    '/backgrounds/background-03.png',
    '/backgrounds/background-04.png',
    '/backgrounds/background-05.png',
    '/backgrounds/background-06.png',
    '/backgrounds/background-07.png',
    '/backgrounds/background-08.png',
    '/backgrounds/background-09.png',
    '/backgrounds/background-10.png',
    '/backgrounds/background-11.png',
    '/backgrounds/background-12.png',
    '/backgrounds/background-13.png',
    '/backgrounds/background-14.png',
    '/backgrounds/background-15.png',
    '/backgrounds/background-16.png',
    '/backgrounds/background-17.png',
    '/backgrounds/background-18.png',
    '/backgrounds/background-19.png',
    '/backgrounds/background-20.png',
    '/backgrounds/background-21.png',
    '/backgrounds/background-22.png',
    '/backgrounds/background-23.png',
    '/backgrounds/background-24.png',
    '/backgrounds/background-25.png',
    '/backgrounds/background-26.png',
    '/backgrounds/background-27.png',
    '/backgrounds/background-28.png',
    '/backgrounds/background-29.png',
    '/backgrounds/background-30.png',
    '/backgrounds/background-31.png',
    '/backgrounds/background-32.png',
    '/backgrounds/background-33.png',
    '/backgrounds/background-34.png',
    '/backgrounds/background-35.png',
    '/backgrounds/background-36.png',
    '/backgrounds/background-37.png',
    '/backgrounds/background-38.png',
    '/backgrounds/background-39.png',
    '/backgrounds/background-40.png',
    '/backgrounds/background-41.png',
    '/backgrounds/background-42.png',
    '/backgrounds/background-43.png',
    '/backgrounds/background-44.png',
    '/backgrounds/background-45.png',
    '/backgrounds/background-46.png',
    '/backgrounds/background-47.png',
    '/backgrounds/background-48.png',
    '/backgrounds/background-49.png',
    '/backgrounds/background-50.png',
    '/backgrounds/background-51.png',
    '/backgrounds/background-52.png',
    '/backgrounds/background-53.png',
    '/backgrounds/background-54.png',
    '/backgrounds/background-55.png',
    '/backgrounds/background-56.png',
    '/backgrounds/background-57.png',
    '/backgrounds/background-58.png',
    '/backgrounds/background-59.png',
    '/backgrounds/background-60.png',
    '/backgrounds/background-61.png',
    '/backgrounds/background-62.png',
    '/backgrounds/background-63.png',
    '/backgrounds/background-64.png',
    '/backgrounds/background-65.png',
    '/backgrounds/background-66.png',
    '/backgrounds/background-67.png',
    '/backgrounds/background-68.png',
    '/backgrounds/background-69.png',
    '/backgrounds/background-70.png',
    '/backgrounds/background-71.png',
    '/backgrounds/background-72.png',
    '/backgrounds/background-73.png',
    '/backgrounds/background-74.png',
    '/backgrounds/background-75.png',
    '/backgrounds/background-76.png',
    '/backgrounds/background-77.png'
  ];

  // Función para obtener un fondo random
  function getRandomBackground() {
    return backgroundImages[Math.floor(Math.random() * backgroundImages.length)];
  }

  // Aplicar fondo random al cargar la página
  bgDiv.style.backgroundImage = `url(${window.__indexRandomBg || getRandomBackground()})`;

  let lastChapters = {};
  fetch('/last.json')
    .then(res => res.json())
    .then(data => {
      lastChapters = data;
    })
    .catch(err => console.error('Error cargando last.json:', err));


  function updateCardContent(card) {
    // Quitar selección anterior
    cards.forEach(c => c.classList.remove('active'));

    // Activar la seleccionada
    card.classList.add('active');

    // Cambiar fondo de página - usar random si no hay fondo específico
    const bgImage = card.getAttribute('data-bg-img');
    if (bgImage && bgImage !== '/icon/background.png') {
      // Si es Berserk u otro con fondo específico
      bgDiv.style.backgroundImage = `url(${bgImage})`;
    } else {
      // Si es One Piece o sin fondo específico, usar random
      bgDiv.style.backgroundImage = `url(${getRandomBackground()})`;
    }

    // Cambiar contenido de la derecha
    const title = card.getAttribute('data-title');
    const series = card.getAttribute('data-series');
    let desc;

    content.classList.toggle('jojos-selected', series === 'jojos');
    
    // Obtener descripción traducida según la serie
    if (series === 'onepiece') {
      desc = t('indexOnepieceDesc');
    } else if (series === 'berserk') {
      desc = t('indexBerserkDesc');
    } else if (series === 'jojos') {
      desc = t('indexJojosDesc');
    } else {
      desc = card.getAttribute('data-desc');
    }

    const fallbackSeriesData = {
      onepiece: { last: 1, base: '/chapters/chapter' },
      berserk: { last: 1, base: '/berserk/chapters/chapter' },
      jojos: { last: 1, base: '/jojos/chapters/phantom_blood/chapter' }
    };
    const serieData = lastChapters[series] || fallbackSeriesData[series] || fallbackSeriesData.onepiece;
    const link1 = `${serieData.base}${serieData.last}`;
    //const link1 = card.getAttribute('data-link1');
    const link2 = card.getAttribute('data-link2');
    const link3 = card.getAttribute('data-link3');

    content.innerHTML = `
      <h1>${title}</h1>
      <p>${desc}</p>
      <div class="buttons">
        <a href="${link1}" class="btn-primary">${t('ultimoCapitulo')}
          <img src="/icon/play_circle.png" alt="" class="icon icon-default" />
        </a>
        <a href="${link2}" class="btn-secondary">${t('verArcos')}</a>
        <a href="${link3}" class="btn-tertiary">${t('comenzarLeer')}</a>
      </div>
    `;

    // 👇 Desplazamiento suave en móviles
    if (window.innerWidth <= 768) {
      const yOffset = -60; // margen opcional si hay header fijo
      const y = content.getBoundingClientRect().top + window.pageYOffset + yOffset;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  }

  // Soporte para clic
  cards.forEach(card => {
    card.addEventListener('click', () => updateCardContent(card));

    // Soporte para teclado
    card.addEventListener('keydown', e => {
      if (e.key === 'Enter' || e.key === ' ') { // enter o espacio
        e.preventDefault();
        updateCardContent(card);
      }
    });
  });
</script>


</main>

  <!-- Script de internacionalización -->
  <script src="/i18n.js"></script>

  <!-- Script de inicialización de idioma -->
  <script>
    const container = document.getElementById('languageSelectorContainer');
    const selector = createLanguageSelector();
    container.appendChild(selector);

    function updatePageLanguage() {
      document.documentElement.lang = currentLang;
      const homeBtn = document.querySelector('.btn-inicio');
      if (homeBtn) homeBtn.title = t('irAInicio');
      document.querySelector('h1').textContent = t('title');
      document.querySelector('.content p').textContent = t('description');
      document.querySelectorAll('.buttons a').forEach(btn => {
        if (btn.href.includes('proyecto')) btn.textContent = t('conoceMas');
        if (btn.href.includes('patreon')) btn.textContent = t('enteraTe');
      });
      document.querySelectorAll('#navDropdown a').forEach(a => {
        if (a.textContent.includes('PROYECTO')) a.innerHTML = `<img src="/icon/book.svg" alt=""> ${t('proyecto')}`;
      });
      // Traducir footer
      const footerDiv = document.getElementById('footerdiv');
      if (footerDiv) {
        footerDiv.textContent = t('derechos');
      }
      document.documentElement.classList.remove('i18n-pending');
    }

    // Ejecutar cuando el DOM esté completamente cargado
    document.addEventListener('DOMContentLoaded', updatePageLanguage);
    // También ejecutar inmediatamente por si ya está cargado
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', updatePageLanguage);
    } else {
      updatePageLanguage();
    }
  </script>

  <!-- Script para el menú hamburguesa en moviles -->
  <script src="/header.js"></script>

   <!-- Script para el buscador -->
  <script src="/search.js"></script>

  <!-- Script que gestiona las cookies -->
  <script src="/cookies.js"></script>

  <footer style="text-align:center;padding:18px 10px;font-size:14px;color:#aaa;">
    <div id="footerdiv" class="i18n-trans">Audiomanga © 2025. Todos los derechos reservados.</div>
  </footer>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v8c78df7c7c0f484497ecbca7046644da1771523124516" integrity="sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==" data-cf-beacon='{"version":"2024.11.0","token":"02600cfac25d42b6a5edf525bb720e6c","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>

</html>
~~~