/* ============================================================================
   PokeWave.net — CSS adicional (paleta sólida, dark mode cálido único)
============================================================================ */

/* Colores de tipos */
:root {
  --type-normal:#A8A878; --type-fire:#F08030; --type-water:#6890F0; --type-electric:#F8D030;
  --type-grass:#78C850;  --type-ice:#98D8D8;  --type-fighting:#C03028; --type-poison:#A040A0;
  --type-ground:#E0C068; --type-flying:#A890F0; --type-psychic:#F85888; --type-bug:#A8B820;
  --type-rock:#B8A038;   --type-ghost:#705898; --type-dragon:#7038F8;  --type-dark:#705848;
  --type-steel:#B8B8D0;  --type-fairy:#EE99AC;

  /* Light theme — base limpio, magazine
     Contrastes (sobre #FFF):
       text-strong (#15110A) → 19.5  AAA
       text-soft   (#322B20) → 12.4  AAA
       text-muted  (#5D5547) → 6.85  AA (subido desde #756C5E que era 4.96 borderline) */
  --surface:        #FFFFFF;
  --surface-alt:    #FAF7F2;   /* crema sutil, no gris frío */
  --surface-strong: #FFFFFF;
  --border-soft:    #E2D9CB;   /* +contraste para que bordes se vean en pantallas claras */
  --border-strong:  #C7BCAA;
  --text-strong:    #15110A;
  --text-soft:      #322B20;   /* antes #3D362A — un toque más oscuro para títulos secundarios */
  --text-muted:     #5D5547;   /* antes #756C5E — pasa AA con holgura sobre todos los surface light */
  --brand-red:      #0E0C0A;   /* Nyakko: el "rojo" es ahora negro carbón. */
  --primary:        #0E0C0A;
  --shadow-sm:      0 2px 8px -2px rgba(20, 17, 10, 0.06);
  --shadow-md:      0 8px 24px -8px rgba(20, 17, 10, 0.10);
  --shadow-lg:      0 24px 60px -20px rgba(20, 17, 10, 0.18);
}

/* Dark theme — carbón cálido pokemón (no azul genérico)
   Contrastes (sobre #0E0C0A):
     text-strong (#FBF7F1) → 18.7  AAA
     text-soft   (#E0D9CC) → 13.4  AAA
     text-muted  (#A8A092) → 7.65  AAA (antes #8F877A daba 5.4) */
html.dark {
  /* Dark Nyakko — carbón con tinte cálido casi negro (estética PokeWave). */
  --surface:        #0E0C0A;
  --surface-alt:    #16130F;
  --surface-strong: #1D1915;
  --border-soft:    #322B23;
  --border-strong:  #443B30;
  --text-strong:    #FBF7F1;
  --text-soft:      #E0D9CC;
  --text-muted:     #A8A092;
  --brand-red:      #fb0086;   /* En dark, el acento se vuelve amarillo */
  --primary:        #fb0086;
  --shadow-sm:      0 2px 8px -2px rgba(0, 0, 0, 0.4);
  --shadow-md:      0 8px 30px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg:      0 24px 80px -20px rgba(0, 0, 0, 0.85);
}

html { background-color: var(--surface); }
body { background-color: var(--surface); color: var(--text-strong); }

/* Sprites pixel art */
.pixelated {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(126,126,134,0.35);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(14,12,10,0.6); }

body {
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(180, 11, 56, 0.55); color: #15110A; }

/* ============================================================================
   Surfaces y texto adaptables
============================================================================ */
.pw-card        { background-color: var(--surface); border: 1px solid var(--border-soft); border-radius: 1.5rem; }
.pw-card-strong { background-color: var(--surface-strong); border: 1px solid var(--border-strong); border-radius: 1.5rem; box-shadow: var(--shadow-md); }
.pw-surface     { background-color: var(--surface); }
.pw-surface-alt { background-color: var(--surface-alt); }
.pw-surface-translucent { background-color: rgba(255,255,255,0.92); }
html.dark .pw-surface-translucent { background-color: rgba(14,12,10,0.92); }
.pw-divider     { border-color: var(--border-soft); }
.pw-shadow-md   { box-shadow: var(--shadow-md); }
.pw-shadow-lg   { box-shadow: var(--shadow-lg); }

.pw-text       { color: var(--text-strong); }
.pw-text-soft  { color: var(--text-soft); }
.pw-text-muted { color: var(--text-muted); }
.pw-border     { border-color: var(--border-soft); }

/* Texto explícito para asegurar contraste */
.pw-text-on-light { color: #15110A !important; }
.pw-text-on-dark  { color: #FBF7F1 !important; }

/* ============================================================================
   FIX DE ACCESIBILIDAD — contrastes 2026
   Mantenemos los colores en backgrounds/bordes; solo bajamos un poco los
   valores cuando se usan como COLOR DE TEXTO sobre superficies claras.
   ============================================================================ */

/* poke-yellow-dark (#c20067) sobre blanco daba ratio 1.93 → FAIL.
   En light usamos un ámbar oscuro que pasa AA (4.85 sobre #FFFFFF). */
html:not(.dark) .text-poke-yellow-dark { color: #8A6B00; }

/* Mantén el dorado vibrante cuando se usa como texto sobre fondo oscuro */
html.dark .text-poke-yellow { color: #FFD22E; }   /* +legibilidad sobre carbón */

/* Nyakko: el "rojo" heredado de PokeWave ahora es NEGRO carbón. Refuerzo
   contraste de links pequeños sobre crema. */
html:not(.dark) a.text-poke-red,
html:not(.dark) .text-poke-red.hover\:underline { color: #0E0C0A; }

/* Asegura que el subrayado en focus sea visible (accesibilidad teclado) */
:where(a, button):focus-visible {
  outline: 2px solid #0E0C0A;
  outline-offset: 2px;
  border-radius: 4px;
}
html.dark :where(a, button):focus-visible { outline-color: #fb0086; }

/* ============================================================================
   SKELETON LOADERS — placeholders para mejor percepción de velocidad
   Útil para imágenes lazy de noticias mientras descargan.
   ============================================================================ */
.pw-skel {
  background: linear-gradient(90deg,
    var(--surface-alt) 0%,
    var(--border-soft) 50%,
    var(--surface-alt) 100%);
  background-size: 200% 100%;
  animation: pw-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 0.5rem;
}
@keyframes pw-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Imágenes lazy GRANDES (cards de noticias / sprites grandes):
   fondo cálido mientras descargan, sin layout shift.
   Selector restringido para no afectar íconos pequeños (type-badge SVG,
   sprites de generación, etc.) que tienen su propio background. */
.news-card-img img[loading="lazy"],
.pw-img-lazy[loading="lazy"] {
  background-color: var(--surface-alt);
}

/* ============================================================================
   ACCESIBILIDAD — prefers-reduced-motion
   Respeta a usuarios sensibles a animaciones (Lighthouse Accessibility).
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .pw-skel { animation: none; }
}

/* ============================================================================
   OPTIMIZACIÓN MOBILE — content-visibility y contain en bloques fuera del fold
   El navegador omite render hasta que se acercan al viewport (LCP/INP mejora).
   ============================================================================ */
/* Aplicamos solo en mobile (donde más impacta LCP/INP). En desktop ya
   tenemos puntaje 95+ y el flash de re-render no es deseable. */
@media (max-width: 1023px) {
  .pw-defer-render {
    content-visibility: auto;
    contain-intrinsic-size: 1px 1600px; /* generoso para evitar "saltos" */
  }
}

/* ============================================================================
   POKÉDATA — Segmento semanal de curiosidades
   Posts generados automáticamente por app/cron/curiosidades.php.
   Los estilos están aquí para que cualquier post con clases .pw-fact-*
   se vea bonito sin tocar el contenido HTML.
   ============================================================================ */
.pw-fact-hero {
  text-align: center;
  margin: 2rem auto 2.5rem;
}
.pw-fact-hero img {
  width: 240px;
  height: 240px;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.15));
  animation: pw-float 5s ease-in-out infinite;
}
.pw-fact-hero figcaption {
  margin-top: 0.5rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

.pw-fact-list {
  display: grid;
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
  counter-reset: fact;
}

.pw-fact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.25rem 1.5rem;
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pw-fact:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.pw-fact-num {
  font-family: 'Press Start 2P', system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  display: inline-block;
  min-width: 3.5rem;
  text-align: right;
  opacity: 0.85;
}
.pw-fact-sprite {
  flex: none;
  width: 84px;
  height: 84px;
  background: var(--surface);
  border-radius: 0.75rem;
  border: 1px solid var(--border-soft);
  display: grid;
  place-items: center;
  padding: 6px;
  grid-row: span 2;
}
.pw-fact-sprite img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Cuando hay sprite cambiamos a 3 cols: número | sprite | contenido */
.pw-fact:has(.pw-fact-sprite) {
  grid-template-columns: auto auto 1fr;
}
.pw-fact-content h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
  color: var(--text-strong);
  line-height: 1.3;
}
.pw-fact-content p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text-soft);
}
.pw-fact-content code {
  background: rgba(238, 21, 21, 0.08);
  color: #CC0F0F;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.86em;
}
html.dark .pw-fact-content code {
  background: rgba(180, 11, 56, 0.12);
  color: #FFD22E;
}

@media (max-width: 640px) {
  .pw-fact {
    grid-template-columns: 1fr;
    padding: 1rem 1.1rem;
  }
  .pw-fact:has(.pw-fact-sprite) {
    grid-template-columns: auto 1fr;
  }
  .pw-fact-num {
    text-align: left;
    min-width: auto;
    font-size: 1.2rem;
  }
  .pw-fact-sprite {
    width: 64px;
    height: 64px;
  }
}

/* ============================================================================
   PULL-TO-REFRESH (PWA) — feedback estilo app nativa
   Sólo aparece visualmente cuando el usuario hace pull desde scrollTop=0
   en modo standalone. Controlado por JS en assets/js/app.js (window.AP_PTR).
   ============================================================================ */
#pw-ptr {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -64px);
  z-index: 100;
  width: 46px; height: 46px;
  background: var(--surface, #fff);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.04);
  color: var(--primary, #EE1515);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),
              opacity .2s ease;
  will-change: transform, opacity;
}
html.dark #pw-ptr {
  background: #1F1A14;
  color: #fb0086;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
}
/* Sólo se muestra cuando html.data-pwa=1 (PWA standalone) */
html:not([data-pwa="1"]) #pw-ptr { display: none !important; }

#pw-ptr.pw-ptr-pulling {
  opacity: 1;
  transition: opacity .15s ease;
}
#pw-ptr.pw-ptr-ready {
  background: var(--primary, #EE1515);
  color: #fff;
}
html.dark #pw-ptr.pw-ptr-ready {
  background: #fb0086;
  color: #1F1A14;
}
#pw-ptr.pw-ptr-loading .pw-ptr-icon {
  animation: pwPtrSpin .9s linear infinite;
}
.pw-ptr-icon {
  width: 22px; height: 22px;
  transition: transform .12s ease-out;
}
@keyframes pwPtrSpin { to { transform: rotate(360deg) !important; } }
@media (prefers-reduced-motion: reduce) {
  #pw-ptr.pw-ptr-loading .pw-ptr-icon { animation: none; }
}

/* ============================================================================
   TOP SEMANAL EN REDES — cards numeradas estilo ranking
   Usado por el post generado por app/cron/top-semana.php
   ============================================================================ */
.pw-top-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.pw-top-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.2rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pw-top-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.pw-top-rank {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  padding-top: .25rem;
}
.pw-top-content h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: .95rem;
  margin: .35rem 0 .6rem;
  line-height: 1.35;
  color: var(--text);
}
.pw-top-content p {
  margin: 0 0 .5rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.pw-top-content .pw-top-why {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-top: .5rem;
}
.pw-top-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  padding: .3rem .65rem;
  border-radius: 999px;
}
.pw-top-source {
  display: inline-block;
  margin-left: .5rem;
  font-size: .8rem;
  color: var(--primary, #EE1515);
  text-decoration: none;
  font-weight: 600;
}
.pw-top-source:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .pw-top-item {
    grid-template-columns: auto 1fr;
    padding: 1rem 1.1rem;
    gap: .8rem;
  }
  .pw-top-rank { font-size: 1.1rem; }
  .pw-top-content h3 { font-size: .85rem; }
}

/* ============================================================================
   GRID DE TIPOS POKÉMON — hover con CSS puro (reemplaza onmouseover inline)
   La variable --hc se setea inline por cada tipo y la consumimos aquí.
   Esto mejora INP y elimina handlers JS innecesarios.
   ============================================================================ */
.pw-type-hover:hover,
.pw-type-hover:focus-visible {
  background-color: var(--hc, var(--surface-alt));
  border-color: transparent;
}
.pw-type-hover:hover .pw-type-label,
.pw-type-hover:focus-visible .pw-type-label {
  color: #fff;
}

/* Iconos de tipo Pokémon - badge circular */
.type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: white;
  flex-shrink: 0;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.18);
}
.type-badge svg { width: 60%; height: 60%; }
.type-badge img { width: 60%; height: 60%; filter: invert(1) brightness(2); }

/* Type chip (badge + label) — usado en cards */
.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  padding: 4px 12px;
  border-radius: 9999px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  line-height: 1.2;
}
.type-chip-mini {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  padding: 3px 10px;
  border-radius: 9999px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
  line-height: 1.2;
}
/* Icono pequeño dentro del chip (img SVG oficial) */
.type-chip-icon {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 9999px;
  background: rgba(255,255,255,.18);
  flex: none;
}
.type-chip-icon img,
.type-chip-icon svg {
  width: 11px; height: 11px;
  filter: brightness(0) invert(1);
}

/* ============================================================================
   Hero sections con onda dramática (estilo Imagen 4 — Shoptendo)
============================================================================ */
.pw-hero-wave {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pw-hero-wave::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  right: -10%;
  height: 75%;
  background: var(--hero-color, #EE1515);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 60% 95%, 0 75%);
  z-index: -2;
}
.pw-hero-wave-bottom::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -10%;
  right: -10%;
  height: 35%;
  background: var(--hero-color, #EE1515);
  clip-path: polygon(40% 30%, 100% 5%, 100% 100%, 0 100%, 0 25%);
  z-index: -2;
}
.pw-hero-wave-soft::before {
  background: var(--hero-color-soft, #FFE0E0);
  clip-path: ellipse(85% 80% at 50% 0%);
  height: 100%;
  top: 0;
}

/* Hero del home con video — overlay legible */
.pw-hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: -5;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 35%, rgba(0,0,0,0.90) 100%);
}

/* ============================================================================
   ESTÉTICA EDITORIAL (inspirada en design.md):
   hero claro con video al lado, divisores diagonales, headings font-light
============================================================================ */
.app-hero-wrapper {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: #FBFDFD;
}
html.dark .app-hero-wrapper { background-color: #0E0C0A; }

@media (min-width: 768px) {
  .app-hero-wrapper {
    min-height: auto;
    height: 100vh;
  }
}

.hero-video-pane {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 100%;
  opacity: 0.30;
  z-index: 1;
}
@media (min-width: 768px) {
  .hero-video-pane { width: 55%; opacity: 1; }
}
.hero-video-pane video,
.hero-video-pane img.video-fallback {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Diagonal divider entre hero claro y sección oscura */
.section-divider {
  position: absolute;
  bottom: 0; left: 0; width: 100%;
  z-index: 3;
  pointer-events: none;
}
.section-divider svg {
  display: block; width: 100%;
  height: 60px;
}
@media (min-width: 768px) { .section-divider svg { height: 120px; } }

/* Headings editoriales gigantes */
.h-display {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 300; /* light */
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.h-display-italic { font-style: italic; }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Estados nuevos del hero stat */
.hero-stat-group { margin-right: 0; }
.hero-description-group { margin-right: 0; }
@media (min-width: 768px) {
  .hero-stat-group { margin-right: 20%; }
  .hero-description-group { margin-right: 50%; }
}

/* Bloque oscuro estilo About */
.bg-ink-frontier { background-color: #0F0F0F; }
.text-frontier-soft { color: #A3A3A3; }
.text-frontier-faint { color: #737373; }
.border-frontier { border-color: #2A2A2A; }

/* ============================================================================
   Marquee ticker (breaking news bar)
============================================================================ */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 60s linear infinite;
}
.animate-marquee:hover { animation-play-state: paused; }

/* ============================================================================
   Magazine-style portal helpers (denso, contenido por todos lados)
============================================================================ */

/* Card de noticia compacta */
.news-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.news-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.news-card .news-card-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--surface-alt);
}
.news-card .news-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.news-card:hover .news-card-img img { transform: scale(1.06); }
.news-card .news-card-cat {
  position: absolute;
  top: .75rem; left: .75rem;
  background: rgba(255,255,255,.92);
  color: #0A0F1F;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .25rem .5rem;
  border-radius: .375rem;
}

/* Widget de barra lateral */
.widget {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  overflow: hidden;
}
.widget-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  gap: 0.75rem;
}
.widget-header h3 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text-strong);
  letter-spacing: -.01em;
  line-height: 1.2;
}
/* Header rojo (Pokémon del día) — texto blanco forzado */
.widget-header.bg-poke-red,
.widget-header[class*="bg-poke-red"] {
  border-bottom-color: transparent;
}
.widget-header.bg-poke-red h3,
.widget-header[class*="bg-poke-red"] h3 {
  color: #FFFFFF !important;
}
.widget-body { padding: 0; }
/* Variante con padding inline (para "¿Sabías que?" y similares) */
.widget-body.widget-body-padded { padding: 1.25rem; }

/* ============================================================================
   NEWS BODY — diseño editorial premium para el cuerpo de las noticias
   ============================================================================ */
.news-body > p:first-of-type {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--text);
  font-weight: 500;
}
.news-body > p:first-of-type::first-letter {
  font-family: Georgia, 'Times New Roman', serif;
  float: left;
  font-size: 3.25rem;
  line-height: 0.85;
  font-weight: 900;
  color: var(--brand-red, #0E0C0A);
  padding: 0.35rem 0.6rem 0 0;
  margin-top: 0.35rem;
}
/* Subtítulos con barra roja a la izquierda */
.news-body h2 {
  position: relative;
  padding-left: 1rem;
}
.news-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  bottom: 0.4em;
  width: 4px;
  border-radius: 2px;
  background: var(--brand-red, #0E0C0A);
}
.news-body h2 { border-bottom: 0 !important; }
.news-body h3 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem !important;
}
/* Bloques con datos importantes */
.news-body .data-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}
/* Listas con bullet */
.news-body ul > li::marker { color: var(--brand-red, #0E0C0A); }
.news-body ol > li::marker { color: var(--brand-red, #0E0C0A); font-weight: 800; }
/* Hashtags como chips */
.news-body code {
  font-family: 'JetBrains Mono','Menlo',monospace;
  font-size: 0.85em;
}
/* Espacio extra entre secciones */
.news-body h2 + p,
.news-body h3 + p { margin-top: 0.5rem; }
.news-body p + h2 { margin-top: 2.5rem; }
/* Imágenes con caption */
.news-body figure { margin: 2rem 0; }
.news-body figcaption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  font-style: italic;
}

/* Tag de categoría compacto */
.cat-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .2rem .5rem;
  border-radius: .25rem;
}

/* Hero magazine: 2 columnas con noticia principal y aside */
.hero-magazine {
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}

/* Sección de juegos por generación (estilo Centro Pokémon) */
.gen-block {
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: .75rem;
  padding: 1.25rem;
}
.gen-block h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-strong);
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--text-strong);
}
.gen-block a {
  display: block;
  font-size: .85rem;
  color: var(--text-soft);
  padding: .35rem 0;
  border-bottom: 1px dashed var(--border-soft);
  transition: color .2s, padding-left .2s;
}
.gen-block a:last-child { border-bottom: 0; }
.gen-block a:hover {
  color: var(--text-strong);
  padding-left: .4rem;
}

/* Subrayado tipo magazine */
.pw-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 4px;
}

/* Tilt hover */
.pw-tilt { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
.pw-tilt:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Card de Pokémon estilo Imagen 1 */
.pw-poke-card {
  background-color: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  padding: 1rem;
  text-align: center;
  position: relative;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pw-poke-card:hover {
  transform: translateY(-4px);
  border-color: #fb0086;
  box-shadow: 0 12px 28px -10px rgba(14,12,10,.25);
}
.pw-poke-card .sprite-bubble {
  position: relative;
  width: 100%;
  height: 110px;
  margin-bottom: .5rem;
}
.pw-poke-card .sprite-bubble::before {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 70%; height: 18px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.18) 0%, transparent 70%);
  transform: translateX(-50%);
}
.pw-poke-card .sprite-bubble img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .35s ease;
}
.pw-poke-card:hover .sprite-bubble img { transform: translateY(-6px) scale(1.08); }

/* Stat bar (para wikidex) */
.pw-stat-bar { position: relative; height: 8px; border-radius: 9999px; background: var(--border-soft); overflow: hidden; }
.pw-stat-bar > span { display: block; height: 100%; border-radius: 9999px; transition: width .8s cubic-bezier(.16,1,.3,1); }

/* Modo Retro */
html.retro { font-family: 'Press Start 2P', monospace !important; }
html.retro body { letter-spacing: 0.5px; }
html.retro * { border-radius: 0 !important; }

/* Google Translate UI - oculta */
.goog-te-banner-frame, .goog-te-gadget, #google_translate_element, .skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-te-spinner-pos { display: none !important; }

/* Animaciones */
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger-item {
  animation: stagger-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--index, 0) * 60ms);
}

@keyframes pw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.pw-float { animation: pw-float 6s ease-in-out infinite; }

@keyframes pw-spin-slow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.pw-spin-slow { animation: pw-spin-slow 30s linear infinite; }

@keyframes pw-bounce-soft { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(8deg); } }
.pw-bounce-soft { animation: pw-bounce-soft 3s ease-in-out infinite; }

/* Pokeball deco - color sólido (negro Nyakko) */
.pw-pokeball-bg {
  position: absolute;
  border-radius: 9999px;
  background: #0E0C0A;
  overflow: hidden;
  opacity: 0.08;
}
.pw-pokeball-bg::before {
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:50%; background:#FFFFFF;
}
.pw-pokeball-bg::after {
  content:''; position:absolute; left:0; right:0; top:50%;
  height:8%; background:#0A0808; transform:translateY(-50%);
}

/* Card tab subtle indicator (estilo Imagen 3) */
.pw-tab {
  position: relative;
  padding: .5rem .25rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color .2s;
}
.pw-tab.active { color: var(--text-strong); }
.pw-tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: #0E0C0A;
  border-radius: 2px;
}
html.dark .pw-tab.active::after { background: #fb0086; }

/* Stepper form */
.pw-step-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.pw-step-pill.active { background: #fb0086; color: #15110A; }
.pw-step-pill.done   { background: #0E0C0A; color: #FFFFFF; }
.pw-step-pill.pending { background: var(--surface-alt); color: var(--text-muted); }

/* Pinterest-style masonry helpers */
.pw-masonry { column-gap: 0.75rem; }
.pw-masonry > * { break-inside: avoid; margin-bottom: 0.75rem; }

/* Botón redondo de acción — negro Nyakko */
.pw-btn-pokeball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 9999px;
  background: #0E0C0A;
  color: white;
  box-shadow: 0 8px 20px -8px rgba(14,12,10,.65), inset 0 -3px 0 rgba(0,0,0,.18);
  transition: transform .2s;
}
.pw-btn-pokeball:hover { transform: scale(1.06) rotate(-8deg); }
.pw-btn-pokeball:active { transform: scale(.95); }

/* ============================================================================
   RESPONSIVE / PWA / SAFE AREAS
============================================================================ */

/* Safe area en mobile / iOS notch */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Touch targets mínimo 44x44 para móvil */
@media (max-width: 768px) {
  a, button, [role="button"], input[type="checkbox"], input[type="radio"] {
    -webkit-tap-highlight-color: rgba(14, 12, 10, 0.1);
  }
  /* Bottom padding por la mobile-tab bar */
  body { padding-bottom: 76px; }
  /* Ocultar la mobile-tab cuando está en input/teclado activo */
  body.has-keyboard .mobile-tabs { display: none !important; }
}

/* Prevent horizontal overflow */
/* Antes: `overflow-x: hidden` a secas. Poner overflow en un eje obliga al
   navegador a calcular `auto` en el otro, y eso convierte al elemento en un
   CONTENEDOR DE SCROLL. Consecuencia medida el 26-ago-2026 en el navegador:
   los dos `position: sticky` del sitio —el header de la barra de navegación y
   la columna lateral— quedaban dentro de ese contenedor y dejaban de anclarse
   a la ventana, así que el header se iba al hacer scroll en vez de quedarse.
   También impide que Safari de iPhone esconda la barra de direcciones al bajar.

   `clip` oculta el desbordamiento igual pero NO crea contenedor de scroll, que
   es justo lo que hace falta. Se deja `hidden` delante como respaldo para
   navegadores viejos que no entiendan `clip` (Safari anterior a la 16). */
html, body { overflow-x: hidden; overflow-x: clip; }

/* Mejor scroll en mobile */
* { -webkit-overflow-scrolling: touch; }

/* PWA standalone: ocultar elementos browser-only */
@media (display-mode: standalone) {
  .browser-only { display: none !important; }
  body { user-select: none; -webkit-user-select: none; }
  body input, body textarea, body [contenteditable] { user-select: text; -webkit-user-select: text; }
}

/* Tipografía adaptativa de hero */
@media (max-width: 640px) {
  .font-display { letter-spacing: -0.02em; }
}

/* Cards: en mobile sin tilt agresivo */
@media (max-width: 768px) {
  .pw-tilt:hover { transform: translateY(-2px); }
  .news-card:hover { transform: translateY(-2px); }
}

/* Sticky bars: ajustar top en mobile (el navbar es más alto en mobile por menú) */
@media (max-width: 768px) {
  .sticky.top-0 { top: 0; }
}

/* ============================================================================
   SCROLLBAR-HIDE — para carruseles horizontales sin scrollbar visible
============================================================================ */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ============================================================================
   NYAKKO LOGO — efecto "shine" realista al hover
   Solo en LIGHT mode (en dark mode quedaría muy notorio sobre fondo oscuro).
   Funciona con una pseudo-pasada de gradient diagonal sobre la imagen.
============================================================================ */
.miaw-logo-shine {
  position: relative;
  overflow: hidden;
  /* contenedor compacto al ancho real de la imagen */
  line-height: 0;
  border-radius: 6px;
}
.miaw-logo-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.85) 50%,
    transparent 62%,
    transparent 100%
  );
  transform: translateX(-120%);
  transition: transform 0s linear;
  mix-blend-mode: screen;
  opacity: 0;
}
.miaw-logo-shine:hover::after {
  transform: translateX(120%);
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 100ms ease-out;
  opacity: 1;
}
/* En dark mode anulamos el shine: sobre fondo oscuro con logo blanco
   un gradient blanco se ve como una mancha sucia, no como un reluciente. */
html.dark .miaw-logo-shine::after,
html.dark .miaw-logo-shine:hover::after {
  opacity: 0;
  transform: translateX(-120%);
}

/* ============================================================================
   JIT FALLBACKS — Tailwind arbitrary classes que NO están en el CSS pre-
   compilado pero SÍ se usan en los templates. Las redefinimos manualmente
   acá para evitar tener que recompilar tailwind.css cada vez. Se generan
   con escapes (\[ y \]) porque CSS no permite corchetes en selectores.
   Si recompilas Tailwind (`npm run build`), Tailwind las genera idénticas
   y este bloque queda redundante (no rompe nada).
============================================================================ */

/* ── font-size arbitrarios ───────────────────────────────────────────────── */
.text-\[9px\]   { font-size: 9px;  line-height: 1.4; }
.text-\[10px\]  { font-size: 10px; line-height: 1.4; }
.text-\[11px\]  { font-size: 11px; line-height: 1.4; }
.text-\[12px\]  { font-size: 12px; line-height: 1.4; }
.text-\[13px\]  { font-size: 13px; line-height: 1.45; }
.text-\[14px\]  { font-size: 14px; line-height: 1.5; }
.text-\[15px\]  { font-size: 15px; line-height: 1.5; }

/* ── letter-spacing arbitrarios ─────────────────────────────────────────── */
.tracking-\[0\.2em\]   { letter-spacing: 0.2em; }
.tracking-\[0\.22em\]  { letter-spacing: 0.22em; }
.tracking-\[0\.25em\]  { letter-spacing: 0.25em; }
.tracking-\[0\.28em\]  { letter-spacing: 0.28em; }
.tracking-\[0\.3em\]   { letter-spacing: 0.3em; }

/* ── aspect-ratio arbitrarios ───────────────────────────────────────────── */
.aspect-\[3\/4\]    { aspect-ratio: 3 / 4; }
.aspect-\[4\/3\]    { aspect-ratio: 4 / 3; }
.aspect-\[16\/9\]   { aspect-ratio: 16 / 9; }
.aspect-\[16\/10\]  { aspect-ratio: 16 / 10; }
.aspect-\[2\/3\]    { aspect-ratio: 2 / 3; }
.aspect-\[5\/4\]    { aspect-ratio: 5 / 4; }
.aspect-\[1\/1\]    { aspect-ratio: 1 / 1; }

/* ── height/width arbitrarios (slider hero + carruseles) ────────────────── */
.h-\[58vh\]       { height: 58vh; }
.h-\[64vh\]       { height: 64vh; }
.h-\[72vh\]       { height: 72vh; }
.h-\[420px\]      { height: 420px; }
.h-\[480px\]      { height: 480px; }
.h-\[520px\]      { height: 520px; }
.h-\[560px\]      { height: 560px; }
.h-\[600px\]      { height: 600px; }
.min-h-\[420px\]  { min-height: 420px; }
.min-h-\[480px\]  { min-height: 480px; }
.min-h-\[560px\]  { min-height: 560px; }
.max-h-\[640px\]  { max-height: 640px; }
.max-h-\[720px\]  { max-height: 720px; }

.w-\[140px\]   { width: 140px; }
.w-\[150px\]   { width: 150px; }
.w-\[160px\]   { width: 160px; }
.w-\[180px\]   { width: 180px; }
.w-\[200px\]   { width: 200px; }
.w-\[220px\]   { width: 220px; }
.w-\[240px\]   { width: 240px; }
.w-\[260px\]   { width: 260px; }
.w-\[280px\]   { width: 280px; }
.w-\[300px\]   { width: 300px; }
.w-\[320px\]   { width: 320px; }
.w-\[360px\]   { width: 360px; }
.w-\[400px\]   { width: 400px; }

/* ── posición sticky / top arbitrarios ──────────────────────────────────── */
.top-\[60px\]   { top: 60px; }
.top-\[64px\]   { top: 64px; }
.top-\[68px\]   { top: 68px; }
.top-\[72px\]   { top: 72px; }

/* ── line-clamp (algunas versiones Tailwind viejas) ─────────────────────── */
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

/* ── leading arbitrarios ───────────────────────────────────────────────── */
.leading-\[1\.05\]  { line-height: 1.05; }
.leading-\[1\.1\]   { line-height: 1.1; }
.leading-\[1\.15\]  { line-height: 1.15; }
.leading-\[1\.2\]   { line-height: 1.2; }
.leading-\[1\.4\]   { line-height: 1.4; }

/* ── EXTRA: min-h/max-h y w arbitrarios usados en pokedex/perfil/quiz ───── */
.min-h-\[260px\]  { min-height: 260px; }
.min-h-\[300px\]  { min-height: 300px; }
.min-h-\[360px\]  { min-height: 360px; }
.max-h-\[420px\]  { max-height: 420px; }
.max-h-\[60vh\]   { max-height: 60vh; }
.max-h-\[70vh\]   { max-height: 70vh; }
.max-h-\[80vh\]   { max-height: 80vh; }

/* width / max-width arbitrarios — dropdowns, drawer mobile, decorativos quiz */
.w-\[22rem\]   { width: 22rem; }
.w-\[480px\]   { width: 480px; }
.w-\[500px\]   { width: 500px; }
.w-\[600px\]   { width: 600px; }
.w-\[88vw\]    { width: 88vw; }
.max-w-\[calc\(100vw-1rem\)\] { max-width: calc(100vw - 1rem); }

/* heights extra para decorativos quiz/perfil */
.h-\[480px\]   { height: 480px; }
.h-\[600px\]   { height: 600px; }

/* posiciones extras (decorativos quiz) */
.right-\[-100px\]  { right: -100px; }
.top-\[-40\]       { top: -40px; }

/* z-index arbitrarios (drawer mobile navbar) */
.z-\[58\]    { z-index: 58; }
.z-\[60\]    { z-index: 60; }

/* opacity arbitraria (decorativos) */
.opacity-\[0\.05\] { opacity: 0.05; }
.opacity-\[0\.08\] { opacity: 0.08; }

/* min-w arbitrarios (badges contador notif) */
.min-w-4    { min-width: 1rem; }
.h-4        { /* ya existe en TW base pero por las dudas */ }

/* ── Colores de marca AniMiaw · generado el 14-sep-2026 por marca-css.php ─────
   Tailwind está compilado sin estos tokens: aquí está cada clase que las
   plantillas usan de verdad, con los valores de tailwind.config.js. */
.bg-miaw-pink\/10 { background-color: rgba(255, 102, 178, 0.1); }
.bg-miaw-pink\/5 { background-color: rgba(255, 102, 178, 0.05); }
.bg-miaw-red { background-color: #fb0086; }
.bg-miaw-red\/15 { background-color: rgba(180, 11, 56, 0.15); }
.bg-miaw-yellow { background-color: #fb0086; }
.bg-miaw-yellow\/15 { background-color: rgba(180, 11, 56, 0.15); }
.bg-miaw-yellow\/40 { background-color: rgba(180, 11, 56, 0.4); }
.bg-miaw-yellow\/5 { background-color: rgba(180, 11, 56, 0.05); }
.border-miaw-pink\/30 { border-color: rgba(255, 102, 178, 0.3); }
.border-miaw-pink\/40 { border-color: rgba(255, 102, 178, 0.4); }
.border-miaw-yellow { border-color: #fb0086; }
.border-miaw-yellow\/40 { border-color: rgba(180, 11, 56, 0.4); }
html.dark .dark\:bg-miaw-yellow\/10 { background-color: rgba(180, 11, 56, 0.1); }
.focus\:border-miaw-yellow:focus { border-color: #fb0086; }
.from-miaw-pink\/20 { --tw-gradient-from: rgba(255, 102, 178, 0.2); }
.from-miaw-red { --tw-gradient-from: #fb0086; }
.group:hover .group-hover\:bg-miaw-yellow { background-color: #fb0086; }
.group:hover .group-hover\:text-miaw-pink { color: #FF66B2; }
.group:hover .group-hover\:text-miaw-yellow { color: #fb0086; }
.hover\:bg-miaw-pink:hover { background-color: #FF66B2; }
.hover\:bg-miaw-yellow:hover { background-color: #fb0086; }
.hover\:bg-miaw-yellow-dark:hover { background-color: #c20067; }
.hover\:bg-miaw-yellow\/10:hover { background-color: rgba(180, 11, 56, 0.1); }
.hover\:bg-miaw-yellow\/15:hover { background-color: rgba(180, 11, 56, 0.15); }
.hover\:border-miaw-pink:hover { border-color: #FF66B2; }
.hover\:border-miaw-yellow:hover { border-color: #fb0086; }
.hover\:text-miaw-pink:hover { color: #FF66B2; }
.hover\:text-miaw-red:hover { color: #fb0086; }
.hover\:text-miaw-yellow:hover { color: #fb0086; }
.text-miaw-pink { color: #FF66B2; }
.text-miaw-red { color: #fb0086; }
.text-miaw-yellow { color: #fb0086; }
.to-miaw-red-dark { --tw-gradient-to: #c20067; }
.to-miaw-yellow\/20 { --tw-gradient-to: rgba(180, 11, 56, 0.2); }
/* ── fin colores de marca ── */

/* ── Degradados de marca · generado el 14-sep-2026 ──
   Tailwind está compilado sin ellos. Mismos valores del config. */
.from-miaw-red { --tw-gradient-from: #fb0086; --tw-gradient-to: rgba(0,0,0,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-miaw-red { --tw-gradient-to: #fb0086; }
.from-miaw-yellow { --tw-gradient-from: #fb0086; --tw-gradient-to: rgba(0,0,0,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-miaw-yellow { --tw-gradient-to: #fb0086; }
.from-miaw-pink { --tw-gradient-from: #FF66B2; --tw-gradient-to: rgba(0,0,0,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-miaw-pink { --tw-gradient-to: #FF66B2; }
.from-miaw-purple { --tw-gradient-from: #B066FF; --tw-gradient-to: rgba(0,0,0,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-miaw-purple { --tw-gradient-to: #B066FF; }
.from-miaw-cyan { --tw-gradient-from: #22D3EE; --tw-gradient-to: rgba(0,0,0,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-miaw-cyan { --tw-gradient-to: #22D3EE; }
.from-miaw-black { --tw-gradient-from: #0E0C0A; --tw-gradient-to: rgba(0,0,0,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-miaw-black { --tw-gradient-to: #0E0C0A; }
/* ── fin degradados ── */

/* ── Iconos de marca AniMiaw · 14-sep-2026 ────────────────────────────────────
   La animación se dispara SOLO al pasar por encima del enlace que contiene el
   icono (.mi-item), nunca sola: un icono que se mueve por su cuenta distrae y
   compite con el contenido; uno que reacciona al ratón da gusto y se nota.

   Todo respeta `prefers-reduced-motion`: quien haya pedido menos movimiento en
   su sistema ve los iconos quietos, que siguen leyéndose igual de bien. */
.mi { display:block; overflow:visible; }
/* OJO: `transform-box:fill-box` NO puede ir en `.mi *`. Eso cambia el origen
   de TODOS los elementos, incluidos los que ya traen su propio `transform`
   en el SVG: los pétalos de la flor de sakura rotaban sobre su propio centro
   en vez de sobre el de la flor, y salían cinco puntos desperdigados. Se
   aplica solo a lo que animamos aquí. */
.mi-c1, .mi-c2, .mi-c3, .mi-estrella, .mi-b1, .mi-b2, .mi-b3,
.mi-brillo, .mi-vel, .mi-marca, .mi-aguja, .mi-punto, .mi-sorpresa,
.mi-bocadillo, .mi-destello, .mi-retrato { transform-box:fill-box; transform-origin:center; }
.mi-item .mi *,
.mi-item .mi { transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; }

/* Catálogo: las portadas se abren en abanico. */
.mi-item:hover .mi-c1 { transform: translateX(1.6px) translateY(-1.2px) rotate(4deg); }
.mi-item:hover .mi-c3 { transform: translateX(-1.6px) translateY(-.6px) rotate(-4deg); }

/* Temporada: la flor de sakura gira despacio. Su origen es el centro del
   dibujo (12 12), no su caja: por eso lleva transform-origin propio. */
.mi-flor { transform-origin: 12px 12px; transform-box: view-box; }
.mi-item:hover .mi-flor { transform: rotate(36deg) scale(1.06); }

/* Calendario: la estrella del día late. */
.mi-item:hover .mi-estrella { transform: scale(1.28) rotate(-12deg); }

/* Top: el podio sube y el brillo destella. */
.mi-item:hover .mi-b1 { transform: translateY(-2.2px); }
.mi-item:hover .mi-b2 { transform: translateY(-1.1px); transition-delay:.04s; }
.mi-item:hover .mi-b3 { transform: translateY(-.6px); transition-delay:.08s; }
.mi-item:hover .mi-brillo { transform: scale(1.3) rotate(18deg); }
.mi-item:hover .mi-vel { transform: translateX(-2.4px); opacity:1; }

/* Manga: el marcador asoma. */
.mi-item:hover .mi-marca { transform: translateY(1.8px); }

/* Guías: la aguja de la brújula busca el norte. */
.mi-item:hover .mi-aguja { transform: rotate(-58deg); }

/* Noticias: el aviso rojo aparece. */
.mi-punto { transform: scale(0); opacity:0; }
.mi-item:hover .mi-punto { transform: scale(1); opacity:1; }

/* Quiz: el bocadillo rebota y salen las líneas de sorpresa. */
.mi-sorpresa { opacity:0; transform: translateY(2px); }
.mi-item:hover .mi-sorpresa { opacity:.75; transform: translateY(0); }
.mi-item:hover .mi-bocadillo { transform: translateY(-1.4px) scale(1.05); }

/* Dónde ver: destella la pantalla. */
.mi-destello { opacity:.4; }
.mi-item:hover .mi-destello { opacity:1; transform: scale(1.12); }

/* Ficha: el retrato se ilumina. */
.mi-item:hover .mi-retrato { transform: scale(1.08); }

/* La cajita del icono: del gris plano a un halo con el color de la sección. */
.mi-caja {
  display:grid; place-items:center; flex:none;
  height:2.5rem; width:2.5rem; border-radius:.85rem;
  background: color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
  transition: background .3s ease, box-shadow .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.mi-item:hover .mi-caja {
  background: color-mix(in srgb, currentColor 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 34%, transparent),
              0 6px 18px -8px currentColor;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .mi *, .mi, .mi-caja { transition: none !important; }
  .mi-item:hover .mi * { transform: none !important; }
  .mi-punto, .mi-sorpresa { opacity:1; transform:none; }
}
/* ── fin iconos de marca ── */

/* ── Contraste del rosa de marca · 15-sep-2026 ────────────────────────────────
   El rosa #fb0086 es precioso, pero es MÁS CLARO que el rojo al que sustituye.
   Medido con la fórmula de contraste de la WCAG:

     rojo  #b40b38 sobre blanco → 6,90   (pasaba de sobra)
     rosa  #fb0086 sobre blanco → 3,86   (NO llega al 4,5 que pide un texto normal)
     rosa  #fb0086 sobre negro  → 5,06   (pasa sin problema)

   O sea: como acento, fondo, icono o borde, el rosa va perfecto. Como COLOR DE
   TEXTO PEQUEÑO SOBRE BLANCO se queda corto, y eso lo paga quien lee en el móvil
   a pleno sol o no tiene buena vista.

   La solución no es renunciar al rosa: es usar el mismo rosa oscurecido
   (#c20067, contraste 6,02) SOLO cuando hace de texto en modo claro. En modo
   oscuro vuelve el rosa vivo, que ahí sí contrasta.

   Se hace aquí y no en el config de Tailwind porque el CSS está compilado y
   porque esto es una regla de contraste, no un color nuevo de la paleta. */
.text-miaw-red, .text-miaw-yellow, .text-poke-red, .text-poke-yellow,
.hover\:text-miaw-red:hover, .hover\:text-miaw-yellow:hover,
.hover\:text-poke-red:hover, .hover\:text-poke-yellow:hover,
.group:hover .group-hover\:text-miaw-red, .group:hover .group-hover\:text-miaw-yellow,
.group:hover .group-hover\:text-poke-red, .group:hover .group-hover\:text-poke-yellow {
  color: #c20067;
}

/* EL PIE ES NEGRO SIEMPRE, TAMBIÉN EN MODO CLARO.
   Y ahí la regla de arriba hacía justo lo contrario de lo que pretendía: ponía
   el rosa OSCURO —el pensado para fondo blanco— sobre el negro del pie.
   Medido el 15-sep-2026 en una ficha: #c20067 sobre #0a0808 da **3,32**, por
   debajo del mínimo de 4,5, en los siete rótulos del pie (los títulos de
   columna «Anime», «Manga», «Comunidad», «Sitio», el del boletín y el de
   contacto). Son siete elementos en TODAS las páginas del sitio.
   El criterio no cambia —rosa oscuro sobre claro, rosa vivo sobre oscuro—, lo
   que cambia es que aquí el fondo no depende del tema. */
footer .text-miaw-red, footer .text-miaw-yellow,
footer .text-poke-red, footer .text-poke-yellow {
  color: #fb0086;
}

/* En oscuro vuelve el rosa vivo: sobre negro contrasta 5,06 y es el color de
   la marca tal cual. */
html.dark .text-miaw-red, html.dark .text-miaw-yellow,
html.dark .text-poke-red, html.dark .text-poke-yellow,
html.dark .hover\:text-miaw-red:hover, html.dark .hover\:text-miaw-yellow:hover,
html.dark .hover\:text-poke-red:hover, html.dark .hover\:text-poke-yellow:hover,
html.dark .group:hover .group-hover\:text-miaw-red, html.dark .group:hover .group-hover\:text-miaw-yellow,
html.dark .group:hover .group-hover\:text-poke-red, html.dark .group:hover .group-hover\:text-poke-yellow {
  color: #fb0086;
}

/* Los BOTONES rosas llevan texto oscuro, no blanco: blanco sobre rosa da 3,86
   y negro sobre rosa da 5,06. Se ve mejor y se lee mejor. */
.bg-miaw-red, .bg-miaw-yellow, .bg-poke-red, .bg-poke-yellow { color: #14060f; }
.bg-miaw-red *, .bg-miaw-yellow *, .bg-poke-red *, .bg-poke-yellow * { color: inherit; }
/* ── fin contraste del rosa ── */

/* ══════════════════════════════════════════════════════════════════════════
   MEDIOS DENTRO DE LA FICHA — lo que parte el muro de texto
   ══════════════════════════════════════════════════════════════════════════
   El dueño lo dijo el 15-sep-2026: las fichas eran «mucha chorrera». Mil
   palabras bien escritas siguen siendo mil palabras seguidas. Estos bloques
   se intercalan entre las secciones (ver app/Services/Ficha/Maqueta.php).

   Va aquí y no en Tailwind porque el Tailwind del sitio está COMPILADO: una
   clase nueva escrita en una plantilla sencillamente no existe.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Vídeo: miniatura con botón, sin cargar el reproductor ───────────────── */
.mi-video { margin: 1.5rem 0; }
.mi-video-boton {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  border-radius: 1rem; overflow: hidden; cursor: pointer; background: #000;
  line-height: 0;
}
.mi-video-boton img { width: 100%; height: auto; display: block; object-fit: cover; }
/* hqdefault viene con franjas negras arriba y abajo: se recorta al 16:9. */
.mi-video-boton img { aspect-ratio: 16 / 9; object-position: center 52%; }
.mi-video-play {
  position: absolute; inset: 0; margin: auto; width: 68px; height: 48px;
  border-radius: 12px; background: rgba(20, 6, 15, .78);
  transition: background .15s ease, transform .15s ease;
}
.mi-video-play::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.mi-video-boton:hover .mi-video-play { background: #fb0086; transform: scale(1.06); }
.mi-video-boton:focus-visible { outline: 3px solid #fb0086; outline-offset: 3px; }
.mi-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 1rem; display: block; }
.mi-video figcaption, .mi-galeria figcaption {
  margin-top: .5rem; font-size: .8125rem; line-height: 1.4; color: #6b6470;
}
html.dark .mi-video figcaption, html.dark .mi-galeria figcaption { color: #a9a2ae; }

/* Varios vídeos (los OP/ED) en fila. */
.mi-videos { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0; }
@media (min-width: 640px) { .mi-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mi-video-chico { margin: 0; }

/* ── Galería de fotogramas ───────────────────────────────────────────────── */
.mi-galeria { margin: 1.5rem 0; }
.mi-galeria-rejilla { display: grid; gap: .625rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mi-galeria-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mi-galeria-rejilla img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: .75rem; display: block;
  background: #efe9ee;   /* el hueco mientras carga, para que no parpadee en blanco */
}
html.dark .mi-galeria-rejilla img { background: #241a22; }

/* ── Personajes ──────────────────────────────────────────────────────────── */
.mi-personajes {
  list-style: none; margin: 1.5rem 0; padding: 0;
  display: grid; gap: .875rem; grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 640px) { .mi-personajes { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mi-personaje { margin: 0; text-align: center; min-width: 0; }
.mi-personaje img {
  width: 100%; height: auto; aspect-ratio: 185 / 265; object-fit: cover;
  border-radius: .625rem; display: block; background: #efe9ee;
}
html.dark .mi-personaje img { background: #241a22; }
.mi-personaje-nombre {
  display: block; margin-top: .375rem; font-size: .75rem; font-weight: 700;
  line-height: 1.25; overflow-wrap: anywhere;
}
.mi-personaje-voz {
  display: block; font-size: .6875rem; line-height: 1.3; color: #6b6470;
  overflow-wrap: anywhere;
}
html.dark .mi-personaje-voz { color: #a9a2ae; }
/* ── fin medios de la ficha ── */

/* ══════════════════════════════════════════════════════════════════════════
   EL CUERPO DE LA FICHA — por qué hace falta y por qué no basta `prose`
   ══════════════════════════════════════════════════════════════════════════
   Medido el 15-sep-2026 con el navegador abierto: dentro de la ficha, un <h2>
   salía a 16px con peso 400 y margen 0. Exactamente igual que el párrafo de
   debajo. Ocho titulares invisibles y mil palabras sin un respiro: eso era la
   «chorrera».

   Dos causas sumadas:
     1. El preflight de Tailwind trae `h1,h2,h3,h4,h5,h6 {font-size: inherit;
        font-weight: inherit}`. Aplasta los titulares a propósito, contando con
        que cada uno lleve sus clases.
     2. La plantilla usaba `prose` del plugin typography, que NO está en el CSS
        compilado: la cadena «.prose» aparece cero veces en los dos ficheros.
        Una clase que no existe no avisa de nada, simplemente no hace nada.

   Las guías no lo sufrían porque su generador escribe las clases en cada
   etiqueta. El texto de la ficha lo escribe el modelo y viene pelado, así que
   el estilo tiene que venir del contenedor.
   ────────────────────────────────────────────────────────────────────────── */
.mi-ficha { font-size: 1rem; line-height: 1.75; }

/* 20px, un escalón POR DEBAJO de los titulares de sección de la página
   («Personajes principales», 24px). Al principio se pusieron a 22px y quedaba
   al revés: el apartado interior gritaba más que la sección que lo contiene, y
   la página llegó a tener cinco tamaños de <h2> distintos. */
.mi-ficha h2 {
  font-size: 1.25rem; font-weight: 800; line-height: 1.3;
  margin: 2.25rem 0 .75rem; letter-spacing: -.01em;
  scroll-margin-top: 5rem;   /* para que el ancla no quede bajo la barra */
}
.mi-ficha h2:first-child { margin-top: 0; }
.mi-ficha h3 {
  font-size: 1.0625rem; font-weight: 700; line-height: 1.3;
  margin: 1.75rem 0 .5rem;
}
.mi-ficha p  { margin: 0 0 1.125rem; }
.mi-ficha p:last-child { margin-bottom: 0; }

/* Una raya rosa corta bajo cada titular: marca dónde empieza cada apartado sin
   gritar. Es el color de la marca y no lleva texto encima, así que no hay
   problema de contraste. */
.mi-ficha h2::after {
  content: ''; display: block; width: 2.25rem; height: 3px;
  margin-top: .5rem; border-radius: 3px; background: #fb0086;
}

.mi-ficha ul, .mi-ficha ol { margin: 0 0 1.125rem; padding-left: 1.25rem; }
.mi-ficha ul { list-style: disc; }
.mi-ficha ol { list-style: decimal; }
.mi-ficha li { margin: .3125rem 0; }
.mi-ficha strong { font-weight: 700; color: inherit; }
.mi-ficha em { font-style: italic; }

/* Los enlaces internos que sobreviven a Publicadas::desenlazar. */
.mi-ficha a { color: #c20067; text-decoration: underline; text-underline-offset: 2px; }
html.dark .mi-ficha a { color: #fb0086; }
.mi-ficha a:hover { text-decoration-thickness: 2px; }

/* En pantallas anchas el texto no debe cruzar la página entera: por encima de
   unos 75 caracteres por línea el ojo pierde el renglón al volver. */
.mi-ficha > p, .mi-ficha > ul, .mi-ficha > ol { max-width: 68ch; }

/* Bloque «Guía relacionada» al final de la ficha.
   Lo pone `EnlaceInterno::bloqueGuias` desde el cron `enlazar-fichas`, y el
   15-sep-2026 salió a producción SIN una sola regla: las noticias y las guías
   sí tenían estilo para esta clase, la ficha no. En el navegador era una lista
   con viñetas pegada al final del texto, sin caja, sin margen y sin aire.
   Mismos colores que el resto de la ficha: rosa oscuro en claro (contraste 6,0
   sobre blanco) y el claro solo en modo oscuro. */
.nyk-ver-tambien {
  margin: 2.5rem 0 0;
  padding: 1.1rem 1.35rem;
  border: 1px solid rgb(229 231 235 / 1);
  border-left: 4px solid #c20067;
  border-radius: 1rem;
  background: rgb(194 0 103 / 0.05);
}
html.dark .nyk-ver-tambien {
  border-color: rgb(64 64 64 / 0.6);
  border-left-color: #fb0086;
  background: rgb(251 0 134 / 0.10);
}
.nyk-ver-tambien-tit {
  font: 800 0.625rem/1 ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c20067;
  margin: 0 0 0.5rem;
}
html.dark .nyk-ver-tambien-tit { color: #fb0086; }
.nyk-ver-tambien ul { margin: 0; padding-left: 1.1rem; list-style: disc; }
.nyk-ver-tambien li { margin: .25rem 0; }
.nyk-ver-tambien a { color: inherit; font-weight: 600; text-decoration: none; }
.nyk-ver-tambien a:hover { color: #c20067; text-decoration: underline; }
html.dark .nyk-ver-tambien a:hover { color: #fb0086; }
/* ── fin cuerpo de la ficha ── */

/* La rejilla de personajes va DENTRO del cuerpo de la ficha, y allí `ul` lleva
   viñeta y sangría (`.mi-ficha ul`). Esa regla tiene más peso que `.mi-personajes`
   a secas, así que reaparecían los puntos negros junto a cada nombre y la
   rejilla quedaba desplazada. Se vuelve a anular con el mismo peso. */
.mi-ficha ul.mi-personajes,
.mi-ficha .mi-personajes { list-style: none; padding-left: 0; margin-left: 0; }
.mi-ficha .mi-personaje { margin: 0; }