/*
Theme Name: Caborteada 2026 Nostalgia
Theme URI: https://caborteada.com.uy
Author: Mathias Alvez
Author URI: https://mathiasalvez.com
Description: Caborteada 2026 · Nostalgia. Experiencia inmersiva estilo "viaje en el tiempo": intro con máquina del tiempo, un juego RPG (Caborteada Quest) y un sitio scroll accesible desde el botón "Visitar web". Diseñado por Mathias Alvez.
Version: 1.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cabor2026nostalgia
*/

/* ===== Base global (portado del export DC) ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Sora', system-ui, sans-serif; color: #e8f6ff; background: #060309; -webkit-font-smoothing: antialiased; }
a { color: #3df0ff; text-decoration: none; }
a:hover { color: #9df6ff; }
::selection { background: #ff37c3; color: #0a0410; }
img { display: block; }

/* ===== Keyframes ===== */
@keyframes cb-spin { to { transform: rotate(360deg); } }
@keyframes cb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-24px); } }
@keyframes cb-scroll-dot { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
@keyframes cb-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cb-flicker { 0%,19%,21%,23%,80%,100% { opacity: 1; } 20%,22%,55% { opacity: .62; } }
@keyframes cb-glow { 0%,100% { filter: drop-shadow(0 0 14px rgba(61,240,255,.55)) drop-shadow(0 0 40px rgba(255,55,195,.35)); } 50% { filter: drop-shadow(0 0 22px rgba(61,240,255,.8)) drop-shadow(0 0 60px rgba(255,55,195,.5)); } }
@keyframes cb-kb { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes cb-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes cb-scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@keyframes cb-ringspin { to { transform: rotate(360deg); } }
@keyframes cb-hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
@keyframes cb-tv-drop { 0% { transform: translateY(-125vh) rotate(-16deg) scale(.72); opacity: 0; } 55% { opacity: 1; } 72% { transform: translateY(3vh) rotate(4deg) scale(1.03); } 84% { transform: translateY(-2vh) rotate(-2deg) scale(.99); } 94% { transform: translateY(1vh) rotate(1deg); } 100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; } }
@keyframes cb-land-shake { 0%,100% { transform: translate(0,0); } 15% { transform: translate(-7px,4px); } 30% { transform: translate(6px,-5px); } 45% { transform: translate(-5px,-3px); } 60% { transform: translate(5px,4px); } 75% { transform: translate(-3px,2px); } }
@keyframes cb-shake-hard { 0%,100% { transform: translate(0,0) rotate(0); } 20% { transform: translate(-9px,5px) rotate(-1deg); } 40% { transform: translate(8px,-6px) rotate(1deg); } 60% { transform: translate(-7px,-4px) rotate(-1deg); } 80% { transform: translate(7px,5px) rotate(1deg); } }
@keyframes cb-tunnel-spin { to { transform: rotate(360deg) scale(2.6); } }
@keyframes cb-roll { 0% { top: -20%; } 100% { top: 118%; } }
@keyframes cb-toast-in { 0% { transform: translateX(-50%) translateY(-24px); opacity: 0; } 12% { transform: translateX(-50%) translateY(0); opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(-50%) translateY(-8px); opacity: 0; } }
@keyframes cb-dpop { 0% { transform: translateY(20px) scale(.96); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes cb-selpop { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes cb-prompt { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes cb-btn-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(61,240,255,.55), 0 0 24px rgba(61,240,255,.5); } 50% { box-shadow: 0 0 0 16px rgba(61,240,255,0), 0 0 30px rgba(61,240,255,.7); } }
@keyframes cb-suck { 0% { transform: scale(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(11); opacity: 0; } }
@keyframes cb-crt-off { 0% { transform: scaleY(1) scaleX(1); opacity: 1; } 55% { transform: scaleY(.014) scaleX(1); opacity: 1; } 75% { transform: scaleY(.014) scaleX(.16); } 100% { transform: scaleY(.006) scaleX(.005); opacity: .9; } }
@keyframes cb-warp-in { 0% { transform: translateY(60px) scale(.96); opacity: 0; filter: blur(8px); } 100% { transform: none; opacity: 1; filter: blur(0); } }

/* ===== Utilidades del diseño ===== */
.cb-reveal { opacity: 0; transform: translateY(38px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.cb-reveal.cb-in { opacity: 1; transform: none; }
.cb-gal-item img { transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.cb-gal-item:hover img { transform: scale(1.08); filter: saturate(1.2) contrast(1.05); }
.cb-nav-link { position: relative; }
.cb-nav-link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: linear-gradient(90deg,#3df0ff,#ff37c3); transition: right .35s ease; box-shadow: 0 0 10px rgba(61,240,255,.7); }
.cb-nav-link:hover::after { right: 0; }
.cb-cta { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.cb-cta:hover { transform: translateY(-3px) scale(1.03); }

/* ===== Íconos retro decorativos (2000s) ===== */
.cb-deco { position: absolute; pointer-events: none; user-select: none; z-index: 1; height: auto; filter: drop-shadow(0 10px 26px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(61,240,255,.32)); }
@media (max-width: 820px) {
  .cb-deco--hide-sm { display: none; }
  .cb-deco { opacity: .6; }
}

/* ===== Responsive / mobile-friendly (el diseño usa grids inline sin breakpoints) ===== */
@media (max-width: 820px) {
  /* Header compacto: se oculta la navegación central */
  .cb-header { padding: 10px 16px !important; gap: 12px !important; justify-content: space-between !important; }
  .cb-nav { display: none !important; }

  /* Hero: menos aire arriba (el header es más bajo en móvil) */
  #hero { padding-top: 104px !important; padding-bottom: 70px !important; }

  /* Grids de 2/3 columnas -> una sola columna */
  #viaje .cb-reveal  { grid-template-columns: 1fr !important; gap: 34px !important; }
  #llegar .cb-reveal { grid-template-columns: 1fr !important; gap: 26px !important; }
  #info .cb-reveal   { grid-template-columns: 1fr !important; gap: 26px !important; }
  .cb-cards-2        { grid-template-columns: 1fr !important; }

  /* Footer centrado en una columna */
  .cb-footer-grid       { grid-template-columns: 1fr !important; gap: 30px !important; }
  .cb-footer-grid > div { display: flex; flex-direction: column; align-items: center; text-align: center; }

  /* Galería: 2 columnas y sin celdas gigantes (se anulan los spans) */
  #galeria .cb-reveal   { grid-template-columns: 1fr 1fr !important; grid-auto-rows: 128px !important; gap: 10px !important; }
  #galeria .cb-gal-item { grid-column: auto !important; grid-row: auto !important; }

  /* Menos padding en las secciones del sitio scroll */
  #viaje, #lineup, #galeria, #llegar, #entradas, #info {
    padding-top: 72px !important; padding-bottom: 72px !important;
    padding-left: 16px !important; padding-right: 16px !important;
  }
}

@media (max-width: 560px) {
  /* En pantallas muy chicas: header = logo + entradas, y galería a 1 columna */
  .cb-year-widget     { display: none !important; }
  #galeria .cb-reveal { grid-template-columns: 1fr !important; grid-auto-rows: 210px !important; }
}

/* ===== WordPress: que la barra de admin no rompa los overlays fijos ===== */
html { margin-top: 0 !important; }