/*
Theme Name: El Gallo Barcode
Theme URI: https://elgallobarcode.com
Author: El Gallo Barcode
Description: Tema personalizado para El Gallo Barcode — tarot, mística y merch.
Version: 1.2
License: GNU General Public License v2 or later
Text Domain: elgallobarcode
*/

/* ⚠ 'Poker In October' ESTABA EN assets/fonts/ SIN DECLARAR. El .otf lleva
   ahí desde siempre y no había ni un @font-face en todo el tema, así que
   pedirla por nombre no la cargaba: el nombre de las cartas de personaje
   salía en la serif de respaldo — y midiendo otra cosa, o sea que el ajuste
   automático del cuerpo calculaba mal (ver egb_skin_marco_js). */
@font-face {
  font-family: 'Poker In October';
  /* ?v=2: la versión con tildes, Ñ, Ü y puntuación española (añadidas a mano).
     Sin cambiar la URL, el navegador seguiría con la de antes en caché. */
  src: url('assets/fonts/PokerInOctober-Demo.otf?v=3') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Card Characters';
  src: url('assets/fonts/cardcharacters.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --light:  #EEEDED;
  --dark:   #282826;
  --red:    #991B31;
  --red-hi: #c4253e;
  --red-dim:#5a0f1c;
  --cc:     "Card Characters","Cinzel",serif;
  --eb:     "Montserrat",sans-serif;
  --ease:   cubic-bezier(0.16,1,0.3,1);
  --hh:     100px;
  /* Aliases para compatibilidad con templates */
  --bg:     var(--light);
  --fg:     var(--dark);
  --accent: var(--red);
  --muted:  #5e5a57;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
a,button,[role="button"],input,select,textarea{touch-action:manipulation;}
/* Tipografía de párrafo: serifa sin cursiva */
p{font-style:normal;}
body{
  background:var(--light);
  font-family:var(--eb);
  min-height:100svh;
  overflow-x:hidden;
  color:var(--dark);
}
body::before{
  content:"";
  position:fixed;
  /* inset:0 para que no salga del viewport — el patrón animado ya trae tiles extra */
  top:-60px;left:-60px;right:0;bottom:0;
  width:calc(100% + 60px);
  height:calc(100% + 60px);
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23282826' fill-opacity='0.025'%3E%3Cpath d='M30 4L56 30L30 56L4 30L30 4zm0 8L12 30l18 18 18-18L30 12z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:60px 60px;
  animation:bgDrift 6s linear infinite;
  will-change:transform;
  pointer-events:none;z-index:0;
  /* clip al viewport para evitar banda derecha en zoom-out */
  clip-path:inset(0 0 0 0);
}
@keyframes bgDrift{to{transform:translate(60px,60px);}}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:9000;
  height:var(--hh);
  width:100%; /* no desbordarse nunca */
  max-width:100vw;
  overflow:hidden;
  /* Grid: left spacer | nav | cart — keeps nav perfectly centered */
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  pointer-events:auto;
  background:
    radial-gradient(ellipse 80% 120% at 50% 130%, rgba(40,40,38,0.45) 0%, transparent 60%),
    radial-gradient(ellipse 40% 80% at 0%   100%, rgba(40,40,38,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 40% 80% at 100% 100%, rgba(40,40,38,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 100% 50% at 50% 0%,   rgba(40,40,38,0.20) 0%, transparent 50%),
    var(--red);
  animation:headerGlow 5s ease-in-out infinite;
}
@keyframes headerGlow{
  0%,100%{background:
    radial-gradient(ellipse 80% 120% at 50% 130%, rgba(40,40,38,0.45) 0%, transparent 60%),
    radial-gradient(ellipse 40% 80% at 0%   100%, rgba(40,40,38,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 40% 80% at 100% 100%, rgba(40,40,38,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 100% 50% at 50% 0%,   rgba(40,40,38,0.20) 0%, transparent 50%),
    var(--red);}
  50%{background:
    radial-gradient(ellipse 80% 130% at 50% 130%, rgba(40,40,38,0.60) 0%, transparent 58%),
    radial-gradient(ellipse 50% 90% at 0%   100%, rgba(40,40,38,0.45) 0%, transparent 52%),
    radial-gradient(ellipse 50% 90% at 100% 100%, rgba(40,40,38,0.45) 0%, transparent 52%),
    radial-gradient(ellipse 100% 55% at 50% 0%,   rgba(40,40,38,0.28) 0%, transparent 48%),
    var(--red);}
}

/* Línea inferior */
.site-header::after{
  content:"";
  position:absolute;bottom:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,
    transparent 0%,rgba(238,237,237,0.2) 8%,
    rgba(238,237,237,0.6) 30%,rgba(238,237,237,0.9) 50%,
    rgba(238,237,237,0.6) 70%,rgba(238,237,237,0.2) 92%,transparent 100%
  );
  box-shadow:0 0 16px rgba(238,237,237,0.25),0 0 32px rgba(238,237,237,0.1);
}

/* Spacer izquierdo: columna de equilibrio */
.header-spacer-left{/* empty, balances right cart column */}

/* ══════════════════════════════════════════
   NAVEGACIÓN
══════════════════════════════════════════ */
.site-nav{
  display:flex;
  align-items:stretch;
  height:100%;
  pointer-events:auto;
  position:relative;
  z-index:1;
}

.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  /* Padding generoso para que los botones respiren */
  padding:14px 20px 12px;
  text-decoration:none;
  position:relative;
  cursor:pointer;
  clip-path:inset(0);   /* equivalente visual a overflow:hidden sin bloquear eventos */
  white-space:nowrap;
  transition:background 0.3s;
  border-left:1px solid rgba(40,40,38,0.25);
  pointer-events:auto;
  -webkit-tap-highlight-color: rgba(255,255,255,0.1);
}
.nav-item:first-child{border-left:none;}

/* ── ACTIVO ── */
.nav-item.active{ background:rgba(40,40,38,0.15); }
.nav-item.active::before{ display:none; }
.nav-item.active::after{  display:none; }

/* ── ONDAS: ocultas por defecto ── */
.nav-waves{
  position:absolute;bottom:0;left:0;right:0;
  height:48px;pointer-events:none;overflow:hidden;
  z-index:0;
  opacity:0;
  transition:opacity 0.35s ease;
}
.nav-item.active .nav-waves{ opacity:1; }

.nav-wave{
  position:absolute;bottom:-2px;
  opacity:0;
  will-change:transform,opacity;
  animation:waveRise var(--wd,3s) ease-in-out var(--dl,0s) infinite;
}
@keyframes waveRise{
  0%  {opacity:0;transform:translateY(0);}
  15% {opacity:0.6;}
  75% {opacity:0.15;}
  100%{opacity:0;transform:translateY(-48px);}
}

/* Brillo activo (via pseudo, sobre overlay) */
.power-glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:0;transition:opacity 0.35s;
  will-change:transform,opacity;
  background:
    radial-gradient(ellipse 100% 80% at 50% 115%, rgba(40,40,38,0.65) 0%, rgba(40,40,38,0.25) 45%, transparent 70%),
    radial-gradient(ellipse 60%  45% at 50% 105%, rgba(40,40,38,0.45) 0%, transparent 60%);
  animation:powerBreathe 2.5s ease-in-out infinite;
}
.nav-item.active .power-glow{ opacity:1; }
@keyframes powerBreathe{
  0%,100%{transform:scaleY(1);opacity:0.85;}
  50%    {transform:scaleY(1.08);opacity:1;}
}

/* Línea activa inferior */
.active-line{
  position:absolute;bottom:0;left:5%;right:5%;
  height:3px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(238,237,237,0.6),#EEEDED,#EEEDED,rgba(238,237,237,0.6),transparent);
  box-shadow:0 0 12px rgba(238,237,237,0.5),0 0 24px rgba(238,237,237,0.25);
  opacity:0;transition:opacity 0.35s;
  animation:activeLineBreath 2.5s ease-in-out infinite;
}
.nav-item.active .active-line{ opacity:1; }
@keyframes activeLineBreath{
  0%,100%{box-shadow:0 0 12px rgba(238,237,237,0.4),0 0 24px rgba(238,237,237,0.2);}
  50%    {box-shadow:0 0 18px rgba(238,237,237,0.7),0 0 36px rgba(238,237,237,0.35);}
}

/* ── ICONO ── */
.nav-icon{
  width:clamp(26px,3.2vw,36px);
  height:clamp(26px,3.2vw,36px);
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;flex-shrink:0;
}
.nav-icon svg{
  width:100%;height:100%;
  fill:#EEEDED;stroke:none;
  transition:filter 0.3s;
}
.nav-item.active .nav-icon svg{
  animation:iconGlow 2.5s ease-in-out infinite;
}
@keyframes iconGlow{
  0%,100%{filter:drop-shadow(0 0 8px rgba(40,40,38,0.8)) drop-shadow(0 0 16px rgba(40,40,38,0.5));}
  50%    {filter:drop-shadow(0 0 14px rgba(40,40,38,1))   drop-shadow(0 0 28px rgba(40,40,38,0.7));}
}

/* Logo box (inicio) */
.nav-logo-box{
  width:clamp(32px,4vw,46px);
  height:clamp(32px,4vw,46px);
  border:none;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;flex-shrink:0;
  background:transparent;
  overflow:hidden;
  transition:box-shadow 0.3s;
}
.nav-item.active .nav-logo-box{
  /* no box-shadow — power-glow handles the effect */
}
.nav-logo-box span{
  font-family:var(--cc);
  font-size:0.3rem;letter-spacing:0.1em;
  color:#EEEDED;
  text-transform:uppercase;text-align:center;line-height:1.2;
}

/* ── AVATAR (perfil con sesión) ── */
.nav-avatar-wrap{
  position:relative;
  width:clamp(26px,3.2vw,36px);
  height:clamp(26px,3.2vw,36px);
  flex-shrink:0;
  border-radius:50%;
}
.nav-avatar-img{
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  border:1.5px solid rgba(238,237,237,0.6);
}
.nav-avatar-level{
  position:absolute;
  bottom:-4px;left:-4px;
  background:#EEEDED;
  color:#991B31;
  font-family:var(--cc);
  font-size:0.38rem;
  font-weight:700;
  line-height:1;
  min-width:14px;
  height:14px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding:0 2px;
  border:1px solid rgba(153,27,49,0.3);
}
@media(max-width:540px){
  .nav-avatar-wrap{ width:clamp(22px,5vw,30px); height:clamp(22px,5vw,30px); }
}
@media(max-width:380px){
  .nav-avatar-wrap{ width:20px; height:20px; }
  .nav-avatar-level{ font-size:0.32rem; min-width:12px; height:12px; }
}

/* ── FRAME BADGE (rombo con nivel de marco) ── */
.nav-frame-badge{
  position:absolute;
  bottom:-6px;left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:13px;height:13px;
  background:var(--dark);
  border:1px solid rgba(238,237,237,0.5);
  z-index:11;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.nav-frame-badge span{
  transform:rotate(-45deg);
  font-family:var(--cc);
  font-size:0.27rem;
  color:#EEEDED;
  letter-spacing:0;
  line-height:1;
  white-space:nowrap;
}
.nav-avatar-wrap.frame-gold .nav-frame-badge{ background:var(--red); border-color:rgba(238,237,237,0.6); }
.nav-avatar-wrap.frame-caos .nav-frame-badge{ background:var(--red); border-color:rgba(238,237,237,0.7); }

.profile-frame-badge{
  position:absolute;
  bottom:-14px;left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:24px;height:24px;
  background:var(--dark);
  border:1.5px solid rgba(238,237,237,0.5);
  z-index:11;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.profile-frame-badge span{
  transform:rotate(-45deg);
  font-family:var(--cc);
  font-size:0.52rem;
  color:#EEEDED;
  letter-spacing:0.05em;
  line-height:1;
  white-space:nowrap;
}
.profile-avatar-ring.frame-gold .profile-frame-badge{ background:var(--red); border-color:rgba(238,237,237,0.6); }
.profile-avatar-ring.frame-caos .profile-frame-badge{ background:var(--red); border-color:rgba(238,237,237,0.7); }

/* ── LABEL ── */
.nav-label{
  font-family:var(--cc);
  font-size:clamp(0.55rem,1vw,0.75rem);
  letter-spacing:0.18em;text-transform:uppercase;
  color:#EEEDED;
  position:relative;z-index:1;
  white-space:nowrap;line-height:1;
  transition:text-shadow 0.3s;
}
.nav-item.active .nav-label{
  text-shadow:0 0 10px rgba(40,40,38,0.9),0 0 22px rgba(40,40,38,0.6);
}

/* ── CONTADOR ── */
.nav-sub{
  font-family:var(--cc);
  font-size:clamp(0.4rem,0.75vw,0.52rem);
  letter-spacing:0.12em;
  color:#EEEDED;
  position:relative;z-index:1;
  margin-top:-3px;
  white-space:nowrap;
  transition:text-shadow 0.3s;
}
.nav-item.active .nav-sub{
  text-shadow:0 0 8px rgba(40,40,38,0.8);
}
.nav-sub b{color:#EEEDED;font-weight:normal;}

/* ── CESTA DESKTOP ── */
.header-cart-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:clamp(12px,3vw,40px);
}
.header-cart{
  display:flex;align-items:center;gap:7px;
  font-family:var(--cc);
  font-size:0.65rem;letter-spacing:0.14em;text-transform:uppercase;
  color:#EEEDED;
  text-decoration:none;
  padding:12px 24px;
  border:1px solid #EEEDED;
  position:relative;overflow:hidden;
  transition:background 0.25s;
  white-space:nowrap;
}
.header-cart::before{
  content:"";position:absolute;inset:0;
  background:rgba(40,40,38,0.25);
  transform:translateX(-101%);
  transition:transform 0.3s var(--ease);z-index:-1;
}
.header-cart:hover{background:rgba(40,40,38,0.15);}
.header-cart:hover::before{transform:translateX(0);}
.header-cart svg{width:22px;height:22px;fill:#EEEDED;stroke:none;flex-shrink:0;}

/* ── CESTA MÓVIL FAB ── */
.cart-fab{
  display:none;
  position:fixed;bottom:24px;right:20px;
  z-index:950;
  width:54px;height:54px;
  background:var(--dark);
  border:2px solid var(--red);
  align-items:center;justify-content:center;
  text-decoration:none;
  box-shadow:0 0 20px rgba(153,27,49,0.5),0 4px 24px rgba(0,0,0,0.5);
  animation:fabPulse 3s ease-in-out infinite;
}
@keyframes fabPulse{
  0%,100%{box-shadow:0 0 16px rgba(153,27,49,0.4),0 4px 20px rgba(0,0,0,0.4);}
  50%    {box-shadow:0 0 28px rgba(153,27,49,0.8),0 4px 28px rgba(0,0,0,0.5);}
}
.cart-fab svg{width:22px;height:22px;fill:#EEEDED;stroke:none;}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* Tablet / móvil grande: ocultar carrito, nav ocupa los 3 cols */
@media(max-width:860px){
  .site-header{
    grid-template-columns:1fr;
    padding:0;
  }
  .header-spacer-left{ display:none; }
  .header-cart-wrap{   display:none; }
  .cart-fab{           display:flex; }
  .site-nav{
    width:100%;
    justify-content:space-around;
  }
  .nav-item{
    flex:1;
    padding:12px 4px 10px;
    min-width:0;
  }
  .nav-label{ font-size:clamp(0.44rem,2.2vw,0.6rem); letter-spacing:0.1em; }
  .nav-sub{   font-size:clamp(0.32rem,1.6vw,0.44rem); }
  .nav-icon{  width:clamp(22px,5vw,30px); height:clamp(22px,5vw,30px); }
  .nav-logo-box{ width:clamp(28px,6vw,38px); height:clamp(28px,6vw,38px); }
}

/* Móvil pequeño */
@media(max-width:380px){
  :root{--hh:82px;}
  .nav-label{ font-size:0.38rem; letter-spacing:0.04em; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .nav-sub{   font-size:0.3rem; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .nav-icon{  width:20px; height:20px; }
  .nav-logo-box{ width:20px; height:20px; }
  .nav-item{ gap:5px; padding:10px 2px 8px; overflow:hidden; }
}

/* ════════════════════════════════════════════
   MARCOS DE NIVEL  Nv5→Bronce | Nv10→Plata | Nv15→Oro | Nv20→Caos
   #EEEDED (luz) · #282826 (oscuro) · #991B31 (rojo)
════════════════════════════════════════════ */

/* ── PROFILE AVATAR RING — marcos eliminados por completo ── */
.profile-avatar-ring.frame-bronze,
.profile-avatar-ring.frame-silver,
.profile-avatar-ring.frame-gold,
.profile-avatar-ring.frame-caos { box-shadow: none !important; animation: none !important; }
.profile-avatar-ring.frame-bronze::before, .profile-avatar-ring.frame-bronze::after,
.profile-avatar-ring.frame-silver::before, .profile-avatar-ring.frame-silver::after,
.profile-avatar-ring.frame-gold::before,   .profile-avatar-ring.frame-gold::after,
.profile-avatar-ring.frame-caos::before,   .profile-avatar-ring.frame-caos::after { display: none !important; }

/* ── RANKING AVATAR FRAMES (32px img inside 36px wrap) ── */
.ranking-avatar-wrap {
  position: relative; display: inline-flex; flex-shrink: 0;
  border-radius: 50%; padding: 2px; background: transparent;
}
.ranking-avatar-wrap img { display: block; border-radius: 50%; width: 32px; height: 32px; object-fit: cover; }
.ranking-avatar-wrap::before,.ranking-avatar-wrap::after { border-radius: 0; }

/* Ranking frames — eliminados, solo queda el rombo */
.ranking-avatar-wrap.frame-bronze,
.ranking-avatar-wrap.frame-silver,
.ranking-avatar-wrap.frame-gold,
.ranking-avatar-wrap.frame-caos {
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  padding: 0;
}
.ranking-avatar-wrap.frame-bronze::before,
.ranking-avatar-wrap.frame-silver::before,
.ranking-avatar-wrap.frame-gold::before,
.ranking-avatar-wrap.frame-caos::before { display: none !important; }

/* ── NAV AVATAR FRAMES (header perfil) ── */
.nav-avatar-wrap.frame-bronze {
  box-shadow: 0 0 0 2px #282826, 0 0 0 4px #EEEDED, 0 0 0 5px #282826,
              0 0 8px rgba(238,237,237,0.25);
}
.nav-avatar-wrap.frame-silver {
  box-shadow: 0 0 0 2px #282826, 0 0 0 4px #EEEDED, 0 0 0 5px #282826,
              0 0 0 6px rgba(238,237,237,0.35), 0 0 0 7px #282826,
              0 0 10px rgba(238,237,237,0.3);
}
.nav-avatar-wrap.frame-gold {
  box-shadow: 0 0 0 2px #282826, 0 0 0 4px #991B31, 0 0 0 5px #282826,
              0 0 0 7px #EEEDED, 0 0 0 8px #282826,
              0 0 12px rgba(153,27,49,0.55);
}
.nav-avatar-wrap.frame-caos {
  box-shadow: 0 0 0 2px #EEEDED, 0 0 0 3px #282826, 0 0 0 5px #991B31,
              0 0 0 6px #282826, 0 0 14px rgba(153,27,49,0.8);
  animation: frameNavCaosGlow 2.5s ease-in-out infinite;
}
@keyframes frameNavCaosGlow {
  0%,100% { box-shadow: 0 0 0 2px #EEEDED,0 0 0 3px #282826,0 0 0 5px #991B31,0 0 0 6px #282826,0 0 14px rgba(153,27,49,0.8); }
  50%      { box-shadow: 0 0 0 2px #EEEDED,0 0 0 3px #282826,0 0 0 5px #991B31,0 0 0 6px #282826,0 0 20px rgba(153,27,49,1); }
}

.header-spacer{height:var(--hh);}

/* ══════════════════════════════════════════
   FOOTER v2 — 3 columnas
══════════════════════════════════════════ */
.site-footer{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(153,27,49,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 10% 50%, rgba(153,27,49,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 90% 50%, rgba(153,27,49,0.07) 0%, transparent 55%),
    linear-gradient(180deg,#1e1714 0%,var(--dark) 25%,#1a1614 100%);
  position:relative;overflow:hidden;z-index:1;
}
.footer-topline{
  width:100%;height:2px;
  background:linear-gradient(90deg,
    transparent 0%,var(--red-dim) 8%,
    var(--red) 30%,var(--red-hi) 50%,
    var(--red) 70%,var(--red-dim) 92%,transparent 100%
  );
  box-shadow:0 0 16px rgba(153,27,49,0.6),0 0 32px rgba(153,27,49,0.25);
}
.footer-sello{
  position:absolute;right:-40px;bottom:-40px;
  width:min(380px,60vw);height:min(380px,60vw);
  opacity:0.045;pointer-events:none;
}

/* Grid 3 columnas */
.footer-body{
  max-width:1200px;margin:0 auto;
  padding:56px clamp(16px,5vw,60px) 0;
  box-sizing:border-box;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1.4fr 1fr;
  gap:clamp(32px,5vw,56px);
  align-items:start;
  position:relative;z-index:1;
}

/* ── COL IZQUIERDA: formulario ── */
.footer-form-col{}
.footer-form-title{
  font-family:var(--cc);
  font-size:clamp(0.58rem,1.1vw,0.72rem);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#EEEDED;
  line-height:1.5;
  margin-bottom:20px;
}
.footer-form-title em{
  font-style:normal;
  color:var(--red-hi);
  font-size:1.15em;
}

.footer-form{
  display:flex;flex-direction:column;gap:10px;
}
.footer-input{
  background:rgba(238,237,237,0.05);
  border:1px solid rgba(238,237,237,0.15);
  padding:11px 14px;
  font-family:var(--eb);
  font-size:0.85rem;
  font-style:italic;
  color:#EEEDED;
  outline:none;
  transition:border-color 0.25s,background 0.25s;
  width:100%;
}
.footer-input::placeholder{
  color:rgba(238,237,237,0.35);
}
.footer-input:focus{
  border-color:rgba(153,27,49,0.6);
  background:rgba(238,237,237,0.08);
}
.footer-submit{
  font-family:var(--cc);
  font-size:0.58rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#EEEDED;
  background:transparent;
  border:1px solid rgba(153,27,49,0.5);
  padding:11px 20px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:border-color 0.25s,color 0.25s;
  width:100%;
  margin-top:4px;
}
.footer-submit::before{
  content:"";
  position:absolute;inset:0;
  background:var(--red);
  transform:translateX(-101%);
  transition:transform 0.35s var(--ease);
  z-index:-1;
}
.footer-submit:hover{border-color:var(--red);}
.footer-submit:hover::before{transform:translateX(0);}
.footer-submit-note{
  font-family:var(--eb);
  font-style:italic;
  font-size:0.72rem;
  color:rgba(238,237,237,0.3);
  margin-top:6px;
  line-height:1.5;
}

/* ── COL CENTRAL: logo + redes ── */
.footer-brand-col{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:0;
  padding:0 16px;
}

/* Logo placeholder */
.footer-logo-wrap{
  margin-bottom:16px;
}
.footer-logo-box{
  width:80px;height:80px;
  border:2px solid rgba(153,27,49,0.4);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 4px;
  position:relative;
}
.footer-logo-box::before{
  content:"";
  position:absolute;inset:5px;
  border:1px solid rgba(153,27,49,0.15);
}
.footer-logo-box span{
  font-family:var(--cc);font-size:0.4rem;
  letter-spacing:0.12em;
  color:rgba(238,237,237,0.4);
  text-transform:uppercase;text-align:center;line-height:1.4;
}

/* Handle */
.footer-handle{
  font-family:var(--eb);
  font-style:italic;
  font-size:clamp(0.85rem,1.6vw,1rem);
  color:rgba(238,237,237,0.65);
  letter-spacing:0.04em;
  margin-bottom:28px;
}

/* Divisor ornamental */
.footer-orn{
  display:flex;align-items:center;gap:10px;
  width:100%;margin-bottom:24px;
}
.footer-orn-line{
  height:1px;flex:1;
  background:linear-gradient(90deg,transparent,rgba(153,27,49,0.4));
}
.footer-orn-line.r{background:linear-gradient(270deg,transparent,rgba(153,27,49,0.4));}
.footer-orn-d{
  width:5px;height:5px;
  background:var(--red);transform:rotate(45deg);flex-shrink:0;
}

/* Iconos redes */
.footer-socials{
  display:flex;gap:12px;justify-content:center;
}
.footer-social-btn{
  width:40px;height:40px;
  border:1px solid rgba(238,237,237,0.15);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  transition:border-color 0.25s,background 0.25s,transform 0.25s;
  position:relative;overflow:hidden;
}
.footer-social-btn::before{
  content:"";position:absolute;inset:0;
  background:var(--red-dim);
  transform:scale(0);
  transition:transform 0.3s var(--ease);
  z-index:0;
}
.footer-social-btn:hover{
  border-color:var(--red);
  transform:translateY(-3px);
}
.footer-social-btn:hover::before{transform:scale(1);}
.footer-social-btn svg{
  width:17px;height:17px;
  fill:#EEEDED;stroke:none;
  opacity:0.55;position:relative;z-index:1;
  transition:opacity 0.25s;
}
.footer-social-btn:hover svg{opacity:1;}

/* ── COL DERECHA: nav ── */
.footer-nav-col{
  padding-top:4px;
}
.footer-nav-title{
  font-family:var(--cc);
  font-size:0.58rem;letter-spacing:0.24em;text-transform:uppercase;
  color:rgba(153,27,49,0.9);
  margin-bottom:20px;padding-bottom:12px;
  border-bottom:1px solid rgba(153,27,49,0.2);
  display:flex;align-items:center;gap:8px;
}
.footer-nav-title::before{
  content:"";width:4px;height:4px;
  background:var(--red);transform:rotate(45deg);flex-shrink:0;
}
.footer-nav-list{
  display:flex;flex-direction:column;gap:0;
}
.footer-nav-link{
  font-family:var(--cc);
  font-size:0.72rem;letter-spacing:0.12em;
  color:rgba(238,237,237,0.55);
  text-decoration:none;
  padding:10px 0;
  border-bottom:1px solid rgba(238,237,237,0.05);
  display:flex;align-items:center;gap:10px;
  transition:color 0.2s,padding-left 0.25s var(--ease);
  position:relative;overflow:hidden;
}
.footer-nav-link::before{
  content:"◆";
  font-size:0.45em;
  color:var(--red);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity 0.2s,transform 0.25s var(--ease);
}
.footer-nav-link:hover{
  color:#EEEDED;
  padding-left:14px;
}
.footer-nav-link:hover::before{
  opacity:1;transform:translateX(0);
}
.footer-nav-link:last-child{border-bottom:none;}

/* ── BARRA INFERIOR ── */
.footer-bottom-wrap{
  max-width:1200px;margin:0 auto;
  padding:28px clamp(16px,5vw,60px) 28px;
  margin-top:40px;
  position:relative;z-index:1;
  box-sizing:border-box;
  width:100%;
}
.footer-divider{
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.footer-div-line{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(153,27,49,0.25),transparent);
}
.footer-div-ds{display:flex;gap:6px;align-items:center;}
.footer-div-d{width:4px;height:4px;background:var(--red);transform:rotate(45deg);opacity:0.5;}
.footer-div-d.big{width:6px;height:6px;opacity:0.8;}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
}
.footer-copy{
  font-family:var(--cc);font-size:0.46rem;
  letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(238,237,237,0.35);
}
.footer-legal{display:flex;gap:clamp(10px,2vw,20px);flex-wrap:wrap;}
.footer-legal a{
  font-family:var(--cc);font-size:0.42rem;
  letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(238,237,237,0.3);text-decoration:none;
  transition:color 0.2s;
}
.footer-legal a:hover{color:#EEEDED;}

/* ── RESPONSIVE ── */
@media(max-width:860px){
  .footer-body{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
  }
  .footer-brand-col{
    grid-column:1/-1;
    order:-1;
    border-bottom:1px solid rgba(153,27,49,0.1);
    padding-bottom:32px;
    margin-bottom:8px;
  }
}
@media(max-width:520px){
  .footer-body{grid-template-columns:1fr;}
  .footer-brand-col{grid-column:1;}
}

/* ══════════════════════════════════════════
   HAMBURGER MÓVIL + CAJÓN DE NAVEGACIÓN
══════════════════════════════════════════ */
.mob-burger{
  display:none;
  position:fixed;top:18px;left:16px;
  background:transparent;border:none;cursor:pointer;
  padding:8px;z-index:9100;
  flex-direction:column;gap:6px;align-items:flex-start;
  -webkit-tap-highlight-color:transparent;
}
.mob-burger span{
  display:block;width:26px;height:3px;
  background:var(--accent);
  box-shadow:2px 2px 0 #EEEDED;
  transition:transform .32s var(--ease),opacity .25s,width .25s;
}
.mob-burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.mob-burger.open span:nth-child(2){opacity:0;width:0;}
.mob-burger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

/* ── Título de página junto al hamburguesa ──
   Oculto siempre salvo en móvil (mismo corte que el propio hamburguesa) y en
   su página: cada variante (--foro, ...) se activa por la clase que
   WordPress ya pone en <body> para su plantilla, así que esto no toca el
   header en ningún otro sitio ni en escritorio. */
.mob-page-title{display:none;}

/* ── Overlay ── */
.mob-nav-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(40,40,38,.72);
  z-index:8950;
  opacity:0;pointer-events:none;
  transition:opacity .35s;
}
.mob-nav-overlay.open{opacity:1;pointer-events:auto;}

/* ── Cajón lateral ── */
.mob-nav-drawer{
  position:fixed;
  top:0;left:0;bottom:0;
  width:min(280px,80vw);
  z-index:9000;
  transform:translateX(-100%);
  transition:transform .38s var(--ease);
  overflow-y:auto;overflow-x:hidden;
  background:
    radial-gradient(ellipse 80% 120% at 50% 130%,rgba(40,40,38,.45) 0%,transparent 60%),
    radial-gradient(ellipse 60% 80% at 0% 0%,rgba(40,40,38,.35) 0%,transparent 55%),
    radial-gradient(ellipse 100% 50% at 50% 0%,rgba(40,40,38,.20) 0%,transparent 50%),
    var(--red);
  box-shadow:4px 0 20px rgba(40,40,38,.18);
  display:flex;flex-direction:column;
  visibility:hidden;
}
.mob-nav-drawer::after{
  content:"";
  position:absolute;top:0;right:0;
  width:2px;height:100%;
  background:linear-gradient(180deg,
    transparent 0%,rgba(238,237,237,.2) 8%,
    rgba(238,237,237,.6) 30%,rgba(238,237,237,.9) 50%,
    rgba(238,237,237,.6) 70%,rgba(238,237,237,.2) 92%,transparent 100%
  );
  box-shadow:0 0 16px rgba(238,237,237,.25);
  pointer-events:none;
}
.mob-nav-drawer.open{
  transform:translateX(0);
  visibility:visible;
}

/* ── Nav clonado dentro del cajón ── */
.mob-nav-inner{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch;
  width:100%;height:auto;
  padding-top:24px;
  position:relative;z-index:1;
}
.mob-nav-inner .nav-item{
  flex:none;
  flex-direction:row;
  justify-content:flex-start;
  /* Fila↔columna por separado: el gap es horizontal (icono↔título), pero al
     envolver en dos líneas (ver más abajo) un "gap" único también se aplica
     como separación vertical entre el título y la descripción, sumándose al
     margin-top de .nav-mob-sub — de ahí el hueco de más. */
  column-gap:16px;row-gap:0;
  padding:18px 24px;
  border-left:none !important;
  border-bottom:1px solid rgba(238,237,237,.08);
  clip-path:none;
  min-width:0;
}
.mob-nav-inner .nav-item:first-child{border-left:none;}
.mob-nav-inner .nav-label{font-size:.75rem;letter-spacing:.2em;}
.mob-nav-inner .nav-sub{font-size:.5rem;margin-top:0;margin-left:4px;}
.mob-nav-inner .nav-waves{display:none;}
.mob-nav-inner .nav-icon,
.mob-nav-inner .nav-logo-box{width:28px;height:28px;flex-shrink:0;}
.mob-nav-inner .nav-avatar-wrap{width:28px;height:28px;flex-shrink:0;}
/* Subtítulos descriptivos — ocultos por defecto (PC los muestra en tooltip) */
.nav-mob-sub{display:none;}

/* ── PC: tooltip al hacer hover ── */
.nav-hover-tooltip{
  position:fixed;
  top:calc(var(--hh,100px) + 10px);
  left:0;
  transform:translateX(-50%) translateY(-10px);
  background:none;
  color:#991b31;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:.65rem;
  letter-spacing:.03em;
  font-weight:700;
  line-height:1.4;
  padding:0;
  border-radius:0;
  box-shadow:none;
  text-shadow:
    0 0 8px rgba(238,237,237,.9),
    0 0 16px rgba(238,237,237,.6),
    1px 1px 0 rgba(238,237,237,.8);
  max-width:220px;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease, transform .28s cubic-bezier(.16,1,.3,1);
  z-index:5000;
  white-space:normal;
}
.nav-hover-tooltip.visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Tooltip en page-epk: texto claro con sombra más potente */
.page-template-page-epk .nav-hover-tooltip {
  color:#EEEDED;
  text-shadow:
    1px 1px 5px rgba(40,40,38,.85),
    0 0 12px rgba(40,40,38,.7),
    0 0 26px rgba(40,40,38,.45);
}

/* ── Hover en nav items (solo desktop) ── */
@media(min-width:769px){
  /* Retorno lento al estado normal */
  .site-nav .nav-icon,
  .site-nav .nav-logo-box {
    transition:transform .55s cubic-bezier(.16,1,.3,1),filter .55s ease;
  }
  .site-nav .nav-label {
    transition:text-shadow .55s ease;
  }
  /* Retorno lento del label también */
  .site-nav .nav-label {
    transition:text-shadow .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
  }
  /* Entrada rápida con rebote */
  .site-nav .nav-item:hover .nav-icon,
  .site-nav .nav-item:hover .nav-logo-box {
    transform:scale(1.22);
    filter:drop-shadow(0 0 9px rgba(238,237,237,.65)) brightness(1.15);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1),filter .16s ease;
  }
  .site-nav .nav-item:hover .nav-label {
    transform:scale(1.12);
    text-shadow:0 0 12px rgba(238,237,237,.8),0 0 26px rgba(238,237,237,.35);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1),text-shadow .16s ease;
  }
  /* Items activos: scale más sutil para no romper sus animaciones */
  .site-nav .nav-item.active:hover .nav-icon,
  .site-nav .nav-item.active:hover .nav-logo-box {
    transform:scale(1.1);
  }
  .site-nav .nav-item.active:hover .nav-label {
    transform:scale(1.06);
  }
}

/* ── Móvil: subtítulo debajo del título en el drawer ── */
.mob-nav-inner .nav-item{flex-wrap:wrap;align-content:center;}
.mob-nav-inner .nav-mob-sub{
  display:block;
  width:calc(100% - 44px); /* 28px icono + 16px gap, sin overflow */
  flex-shrink:0;
  margin-left:44px;
  /* El icono (28px) es más alto que el título y, al centrarse verticalmente
     en esa fila, deja hueco invisible bajo el texto antes de que la fila
     "termine" — de ahí el negativo, para acercar la descripción al título
     de verdad en vez de al borde inferior del icono. */
  margin-top:-5px;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:.58rem;
  letter-spacing:.01em;
  color:rgba(238,237,237,.5);
  line-height:1.35;
  white-space:normal;
}

/* ── Engranaje ajustes (reemplazado por mob-settings-gear en header.php) ── */

@media(max-width:860px){
  .site-header{display:none !important;}
  .header-spacer{display:none !important;}
  .mob-burger{display:flex;}
  .site-nav{display:none !important;}
  .mob-nav-overlay{display:block;}
  /* (El título "Foro" del móvil se quitó el 26/09/2026, se pidió.) */
}

/* ── Global entrance animations ── */
@media (prefers-reduced-motion: no-preference) {
  .anim-ready {
    opacity: 0;
    transform: translateX(calc(var(--anim-dir, -1) * 22px));
    transition:
      opacity  0.6s cubic-bezier(0.16,1,0.3,1) var(--anim-d, 0s),
      transform 0.6s cubic-bezier(0.16,1,0.3,1) var(--anim-d, 0s);
    will-change: opacity, transform;
  }
  .anim-ready.anim-in { opacity: 1; transform: translateX(0); }
}

/* ── Accesibilidad: sin movimiento ── */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .nav-wave, .power-glow, .active-line,
  .cart-fab, .nav-item.active .nav-icon svg { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}