/* ===== RESET / BASE ===== */
*{ box-sizing:border-box }
html, body{
  margin:0;
  padding:0;
  height:100%;
  overflow-x:hidden;
}

/* html NUNCA lleva fondo */
html{
  background:none;
}

/* ===== BODY BASE ===== */
body.opmya{
  font-family: Inter, system-ui, Arial, sans-serif;
  color: var(--text);
  min-height:100vh;
  overflow-x:hidden;
  background:none;
}

iframe{
  max-width:100%;
}

.ad-slot{
  width:100%;
  overflow:hidden;
}

.ad-slot iframe{
  width:100% !important;
  max-width:100% !important;
}
html, body{
  touch-action: manipulation;
}
/* =========================================================
   FONDO GLOBAL ÚNICO (AQUÍ VIVE TODO)
   ========================================================= */
body.opmya::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-10;
  pointer-events:none;
  opacity:0;
  background-repeat:no-repeat;
  background-size:cover;
}
body.no-scroll{
  overflow: hidden;
}

/* =========================================================
   HELPERS
   ========================================================= */
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
.muted{ color:var(--muted) }
.accent{ color:var(--accent) }

/* Accesibilidad */
.skip{
  position:absolute;
  left:-9999px;
}
.skip:focus{
  left:12px;
  top:12px;
  padding:10px 12px;
  z-index:9999;
}

/* Animación genérica */
.animate-in{ animation: fadeUp .6s ease both }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px) }
  to{ opacity:1; transform:translateY(0) }
}

/* =========================================================
   CLIMAS
   ========================================================= */
body.opmya[data-clima="0"]::before{
  opacity:1;
  background: linear-gradient(to bottom,#00d9ff 0%,#00d9ff 14%,#00d9ff 55%,#0053ac 77%,#00167a 100%);
}
body.opmya[data-clima="1"]::before{
  opacity:1;
  background:
    radial-gradient(1200px 700px at 30% 0%, rgba(0,0,0,.45), transparent 60%),
    linear-gradient(180deg, #050596, #0a63bd 60%, #02122f 100%);
}
body.opmya[data-clima="2"]::before{
  opacity:1;
  background: linear-gradient(to bottom,#3d6185 0%,#0a63bd 40%,#494a4a 85%,#292c2e 100%);
}
body.opmya[data-clima="3"]::before{
  opacity:1;
  background: linear-gradient(to bottom,#6fb1d9 50%,#1c3c6b 100%);
}
body.opmya[data-clima="4"]::before{
  opacity:1;
  background: linear-gradient(to bottom,#0b1a2a 0%,#091522 40%,#000814 100%);
}
body.opmya[data-clima="5"]::before{
  opacity:1;
  background: linear-gradient(180deg,#cfcfcf 0%,#8c8c8c 60%,#3a3a3a 100%);
}
body.opmya[data-clima="6"]::before{
  opacity:1;
  background: radial-gradient(ellipse at center,rgba(90,90,90,.9) 0%,rgba(20,20,20,.95) 100%);
}
body.opmya[data-clima="7"]::before{
  opacity:1;
  background: linear-gradient(180deg,#444 0%,#222 100%);
}
body.opmya[data-clima="8"]::before{
  opacity:1;
  background: linear-gradient(to bottom,#e2c38a 0%,#b07a3c 60%,#6b3e1e 100%);
}
body.opmya[data-clima="9"]::before{
  opacity:1;
  background: linear-gradient(to bottom,#cfcfcf 0%,#8f8f8f 50%,#4a4a4a 100%);
}
body.opmya[data-clima="10"]::before{
  opacity:1;
  background: linear-gradient(to bottom,#e5c18b 0%,#c19a6b 40%,#8b5a2b 100%);
}
body.opmya[data-clima="11"]::before{
  opacity:1;
  background: linear-gradient(to bottom,#3a3a3a 0%,#1a1a1a 100%);
}
body.opmya[data-clima="12"]::before{
  opacity:1;
  background: linear-gradient(to bottom,#3a4a55 0%,#1f2a33 100%);
}
body.opmya[data-clima="13"]::before{
  opacity:1;
  background: linear-gradient(to bottom,#1a1a1a 0%,#000000 100%);
}

/* Canvas efectos clima */
#clima-effects{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
#clima-effects canvas{
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
}

/* ======================================================
   Animes Más Destacados
   ====================================================== */

.home-topanimes{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:20px;
}

/* ======================================================
   BOTONES HOME
   ====================================================== */

.home-buttons{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:20px;
}

.home-btn{
  position:relative;
}

.home-btn .btn{
  position:relative;
  display:block;
  padding:14px 16px;
  border-radius:14px;
  font-weight:600;
  text-align:center;
  background:linear-gradient(180deg,#2e7d32,#1b5e20);
  color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition: box-shadow .15s ease;
}

/* 🔴 IMPORTANTE: SIN transform (evita que el badge quede bajo el césped) */
.home-btn .btn:hover{
  box-shadow:0 12px 26px rgba(0,0,0,.35);
}

.home-btn .btn.disabled{
  pointer-events:none;
  opacity:.7;
}

/* ======================================================
   BADGES
   ====================================================== */

.notif{
  position:absolute;
  top:-10px;
  right:-10px;
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
  border-radius:999px;
  white-space:nowrap;
  color:#fff;
  z-index:5;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}

.notif-red{
  background:linear-gradient(180deg,#ff5252,#c62828);
}
.notif-orange{
  background:linear-gradient(180deg,#ff9800,#ef6c00);
}
.notif-yellow{
  background:linear-gradient(180deg,#fdd835,#f9a825);
  color:#222;
}
.notif-off{
  background:linear-gradient(180deg,#9e9e9e,#616161);
}

/* Botón deshabilitado */
.btn-red{
  background:linear-gradient(180deg,#b71c1c,#7f0000);
  color:#fff;
}

/* ======================================================
   HERO INDICATORS
   ====================================================== */

.hero-indicators{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 23px;
}

.btn.ghost{
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  padding:10px 14px;
  border-radius:14px;
  font-weight:600;
  cursor:pointer;
  transition: background .15s ease, box-shadow .15s ease;
}

.btn.ghost:hover{
  background: rgba(255,255,255,.2);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.hero-selector{
  position: relative;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}

.hero-selector.hidden{
  display:none;
}

.hero-selector form{
  background:#111;
  padding:20px;
  border-radius:16px;
  min-width:280px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.hero-selector-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}



/* ======================================================
   ====================================================== */


.content img.zbarra1{
  display: block;
  margin: 14px auto;
  max-width: 100%;
  opacity: .85;
}


   /* ===============================
   BOTÓN TIENDA DESHABILITADO
   =============================== */

.home-btn[data-type="tienda"] .btn{
  background: linear-gradient(180deg,#777,#444) !important;
  border-color:#555 !important;
  color:#ccc !important;
  cursor:not-allowed;
  pointer-events:none;
  filter:grayscale(.4);
  box-shadow:none;
}

.home-btn[data-type="tienda"] .btn:hover{
  background: linear-gradient(180deg,#777,#444) !important;
  color:#ccc !important;
}



/* =========================================================
   DOCUMENTACIÓN – LAYOUT 
   ========================================================= */

   /* CONTENEDOR GENERAL */
   .general-full {
      padding: 15px 25px;
      background: linear-gradient( 180deg, rgba(10, 20, 30, 0.92), rgba(5, 12, 20, 0.96) );
      border: var(--border);
      border-radius: var(--radius);
      position: relative;
      transition: box-shadow .08s linear, transform .08s linear;
      will-change: transform, opacity;
      box-shadow: 0px 0px 10px black;
      animation: fadeUp .6s ease both;
   }

    .general-full::before{
      content:"";
      position:absolute;
      inset:0;
      background: rgba(255,255,255,0.08);
      opacity:0;
      border-radius: inherit;
      pointer-events:none;
    }


    .general-full:hover{
      box-shadow:
        0 0 8px rgb(255, 255, 255);
      transform: translateY(-1px);
    }


   /* GRID PRINCIPAL */
   .general-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0px;
      align-items: start;
      max-width: 1600px;
      margin: 0 auto;
      align-items: start;
   }

   /* =========== RESPONSIVE ============================ */

   @media (max-width: 800px) {
      .general-full {
         padding: 80px 20px;
      }

      .general-layout {
         grid-template-columns: 1fr;
         gap: 40px;
      }
   }
   
   
/* ===============================
   BOTÓN VOLVER ARRIBA
================================ */

.scroll-top-btn{
  position: fixed;
  right: 25px;
  bottom: 75px;
  width: 55px;
  height: 55px;
  border-radius: 35%;
  border: 2px solid var(--accent);
  background: rgba(0,0,0,.75);
  color: var(--accent);
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
  z-index: 200;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);

  transition:
    opacity .25s ease,
    transform .25s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.scroll-top-btn.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top-btn:hover{
  background: var(--accent);
  color: #000;
  box-shadow: 0 0 18px var(--accent);
  transform: translateY(-3px);
}