/*
Theme Name: Frognum Arcade Neón
Theme URI: https://frognum.cl
Author: Frognum
Description: Theme a medida para frognum.cl. Sistema visual "arcade neón": tipografía Bungee (títulos) + Figtree (cuerpo) + IBM Plex Mono (etiquetas), sobre fondo oscuro con acentos neón. Incluye tienda (WooCommerce), video-reseñas, campañas, galería vertical y personalización completa vía Customizer.
Version: 1.5.12
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: frognum
Tags: dark, e-commerce, blog, custom-colors, custom-menu, custom-logo, footer-widgets, full-width-template

Este archivo es el hoja de estilos principal (requerida por WordPress) y contiene
todos los componentes visuales del theme. Las variables de :root abajo son los
valores por defecto; el Customizer los sobreescribe mediante un bloque <style>
inyectado en wp_head (ver inc/customizer.php -> frognum_customizer_css()).
*/

/* =========================================================
   1. TOKENS (valores por defecto — el Customizer los sobreescribe)
   ========================================================= */
:root{
  --bg:#0a0c16;
  --bg2:#12162a;
  --panel:#151a30;
  --pink:#ff2fb0;
  --cyan:#00f0ff;
  --yellow:#f7ff3d;
  --purple:#8b5cf6;
  --text:#eaf1ff;
  --muted:#8b96b8;
  --line: rgba(0,240,255,0.25);

  --f-display:'Bungee', cursive;
  --f-body:'Figtree', sans-serif;
  --f-mono:'IBM Plex Mono', monospace;
  --display-tracking: 0.01em;
  --display-size-hero: 38px;
  --display-size-h2: 32px;
  --body-size: 17px;

  --footer-cols: 3;
  --container: 1180px;
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-padding-top:110px; } /* header sticky (~60px) + ~50px de aire pedidos */
body{
  background:
    radial-gradient(circle at 20% 0%, rgba(139,92,246,0.15), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(0,240,255,0.12), transparent 40%),
    var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--body-size);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}
body.frognum-paper-mode{
  background:#F1E6CE;
  color:#1E2A3A;
}
body::before{
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:999;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4,.display{
  font-family:var(--f-display);
  letter-spacing:var(--display-tracking);
  text-transform:uppercase;
  line-height:1.25;
  margin:0;
}
.mono{ font-family:var(--f-mono); }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; }
::selection{ background:var(--pink); color:#000; }
.screen-reader-text{
  position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:9999; background:var(--pink); color:#0a0c16; padding:10px 16px;
}
.skip-link:focus{ left:10px; top:10px; }

/* =========================================================
   3. HEADER / NAV
   ========================================================= */
.site-header{
  padding:0 24px; border-bottom:1px solid var(--line); z-index:60; background:var(--bg);
}
.site-header-inner{
  max-width:var(--container); margin:0 auto; padding:20px 0;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
}
.site-header.logo-center .site-header-inner{ grid-template-columns:1fr auto 1fr; }
.site-header.logo-center .site-branding{ grid-column:2; justify-self:center; }
.site-header.logo-center .primary-nav{ grid-column:1; justify-self:start; }
.site-header.logo-center .header-right{ grid-column:3; justify-self:end; }
.site-header.nav-right .primary-nav{ justify-self:end; }
.site-header.nav-right.logo-center .primary-nav{ grid-column:3; justify-self:start; }
.site-header.nav-right.logo-center .header-right{ grid-column:1; justify-self:end; }
.site-header.is-sticky{ position:sticky; top:0; }
.site-header.not-sticky{ position:relative; }
.site-header.is-translucent{ background:rgba(10,12,22,0.65); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.site-branding{ display:flex; align-items:center; gap:12px; min-width:0; }

/* Logo subido por el usuario (Personalizar → Identidad del sitio): se
   respeta su proporción natural, sin recortarlo ni forzarlo a un
   cuadrado — eso era lo que lo hacía ver "invisible" o irreconocible.
   El alto es configurable desde Personalizar → Header. */
.site-logo{ display:flex; align-items:center; }
.site-logo img{ display:block !important; height:var(--logo-height, 52px) !important; width:auto !important; max-width:320px; }
/* Glow opcional para logos PNG con fondo transparente: usamos
   drop-shadow (no box-shadow) porque sigue la silueta real del PNG en
   vez de dibujar un cuadrado alrededor de la imagen. */
body.frognum-logo-glow .site-logo img{
  filter:drop-shadow(0 0 6px var(--logo-glow-1, var(--pink))) drop-shadow(0 0 16px var(--logo-glow-1, var(--pink)));
  transition:filter .25s ease;
}
body.frognum-logo-glow .site-branding:hover .site-logo img{
  filter:drop-shadow(0 0 8px var(--logo-glow-2, var(--cyan))) drop-shadow(0 0 20px var(--logo-glow-2, var(--cyan)));
}
.site-logo a{ display:flex; align-items:center; }

/* Insignia de respaldo (círculo con inicial) solo cuando NO hay logo subido */
.logo-badge{
  width:var(--logo-height, 42px); height:var(--logo-height, 42px); border:2px solid var(--cyan); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; color:var(--cyan);
  font-family:var(--f-display); font-size:calc(var(--logo-height, 42px) * 0.33);
  box-shadow:0 0 14px rgba(0,240,255,0.6), inset 0 0 8px rgba(0,240,255,0.3);
  flex-shrink:0;
}

.site-title{ font-family:var(--f-display); font-size:16px; color:var(--text); display:flex; flex-direction:column; gap:4px; line-height:1.3; }
.site-title span.site-tagline{
  font-family:var(--f-body); font-size:12px; text-transform:none; letter-spacing:0; color:var(--muted);
}

.primary-nav{ min-width:0; }
.primary-nav > ul{ display:flex; flex-wrap:wrap; gap:10px 26px; list-style:none; margin:0; padding:0; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.primary-nav ul, .primary-nav li, .primary-nav a{ font-family:var(--nav-font, var(--f-mono)) !important; font-size:var(--nav-font-size, 12px) !important; }
.primary-nav li{ position:relative; }
.primary-nav a{ display:block; padding:6px 0; }
.primary-nav a:hover, .primary-nav .current-menu-item > a{ color:var(--yellow); text-shadow:0 0 8px var(--yellow); }

/* Submenús (desplegables) */
.primary-nav li{ padding-bottom:6px; margin-bottom:-6px; } /* puente invisible: evita perder el hover al bajar hacia el submenú */
.primary-nav .sub-menu{
  display:none; position:absolute; top:100%; left:0; min-width:220px; z-index:80;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius); padding:10px 0; margin-top:0;
  flex-direction:column; gap:0; box-shadow:0 10px 30px rgba(0,0,0,.5); list-style:none;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu{ display:flex; }
.primary-nav .sub-menu a{ padding:9px 18px; white-space:nowrap; }
.primary-nav .sub-menu li{ list-style:none; padding-bottom:0; margin-bottom:0; }
.primary-nav .sub-menu .sub-menu{ top:0; left:100%; margin-top:0; margin-left:0; }
.primary-nav li.menu-item-has-children > a::after{ content:'▾'; margin-left:6px; font-size:9px; opacity:.7; }

.header-right{ display:flex; align-items:center; gap:22px; }
.cart-icon{ position:relative; font-size:18px; filter:drop-shadow(0 0 6px rgba(0,240,255,0.6)); }
.cart-count{
  position:absolute; top:-8px; right:-10px; background:var(--pink); color:#0a0c16;
  font-family:var(--f-mono); font-size:10px; font-weight:600; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 8px var(--pink);
}
.menu-toggle{ display:none; background:transparent; border:1px solid var(--line); color:var(--text); padding:8px 12px; border-radius:var(--radius); }
@media (max-width:900px){
  .primary-nav{ display:none; }
  .menu-toggle{ display:block; }
  .primary-nav.is-open{ display:block; position:absolute; top:100%; left:0; right:0; background:var(--bg2); padding:16px 24px; border-bottom:1px solid var(--line); z-index:70; max-height:80vh; overflow-y:auto; }
  .primary-nav.is-open > ul{ flex-direction:column; gap:4px; }
  .primary-nav li{ padding-bottom:0; margin-bottom:0; }
  .primary-nav .sub-menu{
    display:block; position:static; background:transparent; border:none; box-shadow:none; padding:4px 0 4px 16px; margin:0;
  }
  .primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu{ display:block; }
  .primary-nav .sub-menu .sub-menu{ margin-left:0; }
}

/* =========================================================
   4. BUTTONS / PILLS / BADGES (compartidos en todo el theme)
   ========================================================= */
.btn{
  font-family:var(--f-mono); font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  padding:14px 26px; border-radius:var(--radius); border:2px solid var(--pink); color:var(--pink); background:transparent;
  box-shadow:0 0 16px rgba(255,47,176,0.35); transition:all .15s ease; cursor:pointer; display:inline-block;
}
.btn:hover{ background:var(--pink); color:#0a0c16; box-shadow:0 0 24px var(--pink); }
.btn.alt{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 16px rgba(0,240,255,0.35); }
.btn.alt:hover{ background:var(--cyan); color:#0a0c16; box-shadow:0 0 24px var(--cyan); }

/* Botón naranjo flúor tipo pastilla, para inserciones dentro del
   contenido (ej. "¡Quiero donar!"). Se aplica agregando la clase
   "btn-orange" al bloque Botón de Gutenberg, o a cualquier <a>. */
.btn-orange{
  font-family:var(--f-mono); font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  padding:14px 30px; border-radius:999px; border:2px solid #ff6a00; color:#ff6a00; background:transparent;
  box-shadow:0 0 18px rgba(255,106,0,0.5); transition:all .15s ease; cursor:pointer; display:inline-block;
}
.btn-orange:hover{ background:#ff6a00; color:#0a0c16; box-shadow:0 0 28px #ff6a00; }

.pill{ font-family:var(--f-mono); font-size:10px; text-transform:uppercase; padding:4px 10px; border-radius:12px; letter-spacing:.05em; display:inline-block; }
.pill.c-tv{ color:var(--cyan); border:1px solid var(--cyan); }
.pill.c-gol{ color:var(--pink); border:1px solid var(--pink); }
.pill.c-vg{ color:var(--yellow); border:1px solid var(--yellow); }

.badge{ font-family:var(--f-mono); font-size:9px; text-transform:uppercase; letter-spacing:.05em; padding:4px 8px; border-radius:var(--radius); }
.badge.new{ color:var(--cyan); border:1px solid var(--cyan); box-shadow:0 0 8px rgba(0,240,255,.4); }
.badge.low{ color:var(--yellow); background:rgba(10,12,22,0.8); border:1px solid var(--yellow); box-shadow:0 0 8px rgba(247,255,61,.4); }
.badge.out{ color:var(--muted); border:1px solid var(--muted); }

/* =========================================================
   5. HERO / CARRUSEL
   ========================================================= */
.hero{
  position:relative; overflow:hidden; text-align:center;
  min-height:var(--hero-height, 500px); display:flex; align-items:center; justify-content:center;
  /* El padding se puso en .hero-inner (más abajo), no acá: si se deja
     acá, el fondo del carrusel (.hero-slide-bg, position:absolute;
     inset:0) queda posicionado relativo al borde INTERNO del padding,
     dejando franjas sin imagen arriba/abajo/a los costados en vez de
     cubrir el hero completo de punta a punta. */
  /* Ancho completo del viewport por defecto, sin importar si algún
     ancestro llegara a tener un max-width (ej. un futuro wrapper
     .wrap): rompe el contenedor con el truco estándar de "full
     bleed". body ya tiene overflow-x:hidden, así que es seguro. */
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:0; /* sin espacio respecto al header sticky de arriba */
}
.grid-floor{
  position:absolute; left:0; right:0; bottom:0; height:220px;
  background-image:
    linear-gradient(rgba(255,47,176,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,47,176,0.35) 1px, transparent 1px);
  background-size:40px 40px; transform:perspective(280px) rotateX(60deg); transform-origin:bottom;
  mask-image:linear-gradient(to top, black, transparent); opacity:.6;
}
.hero-inner{ position:relative; z-index:2; max-width:var(--hero-content-width, 760px); width:100%; margin:0 auto; padding:70px 24px; }
.eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.15em; color:var(--cyan);
  border:1px solid var(--cyan); display:inline-block; padding:6px 14px; border-radius:20px; margin-bottom:26px;
  box-shadow:0 0 10px rgba(0,240,255,0.4);
}
.hero h1{ font-size:var(--display-size-hero); color:var(--text); text-shadow:0 0 6px var(--pink), 0 0 22px var(--pink), 0 0 46px rgba(255,47,176,0.5); margin-bottom:22px; }
.hero h1 em{ font-style:normal; color:var(--cyan); text-shadow:0 0 6px var(--cyan), 0 0 22px var(--cyan); }
.hero p{ color:var(--muted); font-size:22px; max-width:52ch; margin:0 auto 34px; line-height:1.5; }
.cta-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* Carrusel: slides superpuestos con transición animada real (antes el
   cambio era un corte seco display:none/block, sin animación).
   .hero ya es flex por la regla de arriba; sin este override los
   slides y los puntos de navegación quedaban como items en FILA
   (uno al lado del otro), por eso los puntos aparecían "al costado"
   en vez de abajo centrados. */
.hero.hero-carousel{ flex-direction:column; }
.hero.hero-carousel .hero-inner{ padding-bottom:70px; } /* espacio para los puntos de paginación, sin afectar el fondo a pantalla completa */
.hero-carousel{ position:relative; }
.hero-slide{
  position:absolute; inset:0; width:100%; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none; z-index:1;
  transition:opacity .6s ease, transform .6s ease;
  /* Sin padding acá a propósito: .hero-slide-bg (el fondo, ver más
     abajo) es hijo directo de este elemento con position:absolute;
     inset:0 — si este contenedor tuviera padding, el fondo quedaría
     encogido dentro de ese padding en vez de cubrir el slide de punta
     a punta. El padding real para el texto vive en .hero-inner. */
}
.hero-slide.is-active{ opacity:1; visibility:visible; pointer-events:auto; z-index:2; position:relative; }

/* Modo "slide": la entrante llega desde la derecha y se desliza a su
   posición; la saliente se desliza hacia la izquierda mientras se
   desvanece. */
.hero-carousel.transition-slide .hero-slide{ transform:translateX(40px); }
.hero-carousel.transition-slide .hero-slide.is-leaving{ transform:translateX(-40px); opacity:0; }
.hero-carousel.transition-slide .hero-slide.is-active{ transform:translateX(0); }

/* Imagen destacada del post/slide como fondo del hero, con velo oscuro
   para que el texto siga siendo legible encima. background-size:cover
   recorta para llenar el espacio configurado (modo "Cubrir"). */
.hero-slide-bg{
  position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
}
.hero-slide-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,12,22,.55), rgba(10,12,22,.85));
}
/* Modo "Ajustar al ancho": <img> real en vez de fondo CSS, para que
   JS pueda medir sus dimensiones reales y calcularle al Hero el alto
   exacto que le corresponde a esa imagen a ancho completo — así se ve
   COMPLETA, nunca recortada, con el alto configurado en el Customizer
   funcionando como tope máximo en vez de alto fijo (ver main.js). */
.hero-slide-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:0; display:block; }
.hero-slide:has(.hero-slide-img)::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,12,22,.55), rgba(10,12,22,.85)); z-index:1;
}
.hero.hero-carousel[data-fit="width"]{ min-height:0; }
.hero-slide .hero-inner{ position:relative; z-index:2; }

.carousel-dots{ display:flex; align-items:center; gap:8px; justify-content:center; position:absolute; left:0; right:0; bottom:22px; z-index:3; }
.carousel-dot{ width:9px; height:9px; min-width:9px; min-height:9px; flex-shrink:0; padding:0; margin:0; box-sizing:border-box; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none; }
.carousel-dot.is-active{ background:var(--pink); border-color:var(--pink); box-shadow:0 0 8px var(--pink); }

/* =========================================================
   6. BANNERS PUBLICITARIOS
   ========================================================= */
.frognum-promo{ text-align:center; padding:20px 24px; }
.frognum-promo-box{
  width:100%; max-width:var(--container); margin:0 auto; border:1px dashed var(--line); border-radius:var(--radius);
  padding:14px; font-family:var(--f-mono); font-size:11px; color:var(--muted); min-height:150px;
  display:flex; align-items:center; justify-content:center;
}
/* El banner puede quedar dentro de .article-body (cuando se usa la
   opción "mostrar al final de cada entrada") — sin esto, la regla
   genérica de enlaces/imágenes de prosa (.article-body a{color:#ff6a00},
   .article-body img{border:1px solid...}) le ganaba y los links del
   banner salían naranjos, y cualquier imagen pegada en medio del texto
   (ej. un logo chico como el de Patreon) salía con un borde no deseado. */
.frognum-promo a{ color:#fff !important; text-decoration:none !important; }
.frognum-promo-box img{ border:none !important; border-radius:0; margin:0; }
.frognum-promo-box img, .frognum-promo-box a{ max-width:100%; }
/* Solo la imagen del banner "simple" (opción Imagen del Customizer, la
   que cae directo como hijo de .frognum-promo-box o de su <a>) debe
   estirarse a pantalla completa. Antes esto aplicaba a CUALQUIER <img>
   dentro del HTML personalizado — incluyendo logos pequeños pegados en
   medio de texto (ej. el logo de Patreon), que quedaban forzados a
   100% de alto/ancho y se veían deformados con un "borde" visible. */
.frognum-promo-box > img, .frognum-promo-box > a > img{ width:100%; height:100%; object-fit:cover; border-radius:calc(var(--radius) - 1px) !important; }

/* =========================================================
   7. SECTION HEAD
   ========================================================= */
.section{ padding:64px 24px; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:38px; flex-wrap:wrap; }
.section-head h2{ font-size:var(--display-size-h2); color:var(--text); }
.section-head .tag{ font-family:var(--f-mono); font-size:11px; color:var(--muted); }
.pill-link{
  font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--cyan);
  border:1px solid var(--cyan); border-radius:99px; padding:8px 18px; transition:all .15s ease; white-space:nowrap;
}
.pill-link:hover{ background:var(--cyan); color:#0a0c16; box-shadow:0 0 14px var(--cyan); }

/* ---------- Explora por categoría: botones cuadrados estilo "Donar" ---------- */
.category-buttons-grid{
  display:grid; grid-template-columns:repeat(var(--cat-btn-columns, 4), 1fr); gap:20px;
}
.category-btn{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; text-align:center;
  border:2px solid var(--pink); border-radius:var(--radius); color:var(--pink); padding:16px;
  font-family:var(--cat-btn-font, var(--f-mono)); font-size:15px; text-transform:uppercase; letter-spacing:.04em;
  transition:all .15s ease; box-shadow:0 0 16px rgba(255,47,176,0.25); position:relative; overflow:hidden;
  background-size:cover; background-position:center;
}
.category-btn:hover{ box-shadow:0 0 24px var(--pink); transform:translateY(-2px); }
.category-btn:not(.has-image):hover{ background-color:var(--pink); color:#0a0c16; }
/* Con imagen de fondo: overlay neón con rayas diagonales (mismo patrón
   que la barra de envío gratis) para que el texto siga siendo legible
   y mantenga el lenguaje visual del theme. */
.category-btn.has-image{ color:#fff; font-weight:700; text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.9); }
.category-btn.has-image::before{
  content:''; position:absolute; inset:0; z-index:1;
  background-color:rgba(10,12,22,0.72);
  background-image:
    linear-gradient(rgba(10,12,22,0.35), rgba(10,12,22,0.75)),
    repeating-linear-gradient(45deg, rgba(255,47,176,0.25) 0 10px, transparent 10px 20px);
  transition:background-color .15s ease;
}
.category-btn.has-image:hover::before{ background-color:rgba(255,47,176,0.4); }
.category-btn.has-image span{ position:relative; z-index:2; }
@media (max-width:700px){ .category-buttons-grid{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   8. HIGH SCORE CARDS (posts en home)
   ========================================================= */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:relative; transition:all .18s ease; }
.card:hover{ border-color:var(--cyan); box-shadow:0 0 22px rgba(0,240,255,0.25); transform:translateY(-3px); }
.card-window{
	aspect-ratio:16/9; background:linear-gradient(160deg,#1a1030,#0d0f1e); display:flex; align-items:center; justify-content:center;
	font-size:44px; border-bottom:1px solid var(--line); position:relative; overflow:hidden;
}
.card-window img{ width:100%; height:100%; object-fit:cover; }
.card-window .badge{ position:absolute; bottom:10px; left:10px; }
.card-body{ padding:22px; }
.card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.card .num{ font-family:var(--f-mono); font-size:11px; color:var(--muted); }
.card h3{ font-size:19px; color:var(--text); margin-bottom:10px; line-height:1.3; text-transform:none; letter-spacing:0; font-family:var(--f-display); }
.card p{ color:var(--muted); font-size:16px; line-height:1.5; margin:0 0 16px; }
.card .meta{ font-family:var(--f-mono); font-size:11px; color:var(--muted); display:flex; justify-content:space-between; }

/* =========================================================
   9. VIDEO CABINETS (video-reseñas)
   ========================================================= */
.cabinets{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cabinet{
  background:linear-gradient(180deg,#1a1030,#0d0f1e); border:2px solid var(--purple); border-radius:var(--radius); padding:16px;
  aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.cabinet::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 4px); }
.cabinet .label{ font-family:var(--f-mono); font-size:10px; color:var(--yellow); position:relative; z-index:1; }
.cabinet h4{ font-family:var(--f-display); font-size:14px; color:var(--text); line-height:1.35; position:relative; z-index:1; text-transform:uppercase; }
.cabinet .play{ align-self:flex-end; width:36px; height:36px; border-radius:50%; background:var(--pink); display:flex; align-items:center; justify-content:center; box-shadow:0 0 14px var(--pink); font-size:13px; color:#0a0c16; position:relative; z-index:1; }

/* =========================================================
   10. TIENDA — vitrina / grilla de productos
   ========================================================= */
.shop-grid{ display:grid; grid-template-columns:repeat(var(--shop-columns, 4), 1fr); gap:var(--shop-gap, 22px); }
.shop-grid-home{ display:grid; grid-template-columns:repeat(var(--home-shop-columns, 4), 1fr); gap:var(--shop-gap, 22px); }
.product{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:visible; display:flex; flex-direction:column; transition:all .18s ease; position:relative; }
.product:hover{ border-color:var(--pink); box-shadow:0 0 22px rgba(255,47,176,0.28); transform:translateY(-3px); }
.product-window{
  aspect-ratio:1/1; background:repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 6px, transparent 6px 12px), linear-gradient(160deg,#1a1030,#0d0f1e);
  display:flex; align-items:center; justify-content:center; font-size:52px; border-bottom:1px solid var(--line); position:relative;
  overflow:hidden; border-radius:var(--radius) var(--radius) 0 0;
}
.product-window img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
/* Defensivo: si por algún motivo llega a renderizarse más de una
   imagen dentro de la ventana de producto (visto en capturas, sin
   causa confirmada en el PHP), solo se muestra la primera. */
.product-window img ~ img{ display:none !important; }
.product-window .badge{ position:absolute; top:10px; left:10px; }
.product-window-link{ display:block; width:100%; height:100%; }
.product-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; border-radius:0 0 var(--radius) var(--radius); overflow:hidden; }
.product-body h4{ font-family:var(--f-display); font-size:14px; color:var(--text); line-height:1.4; letter-spacing:0; text-transform:none; }
.product-price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; gap:8px; }
.price{ font-family:var(--price-font, var(--f-mono)); font-size:16px; color:var(--yellow); text-shadow:0 0 8px rgba(247,255,61,.4); }
.price.old{ font-size:12px; color:var(--muted); text-decoration:line-through; text-shadow:none; margin-right:6px; }
.price.big{ font-size:26px; }
.add-btn{ font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:9px; border-radius:var(--radius); border:1px solid var(--cyan); color:var(--cyan); background:transparent; cursor:pointer; transition:all .15s ease; text-align:center; width:100%; }
.add-btn:hover{ background:var(--cyan); color:#0a0c16; box-shadow:0 0 14px var(--cyan); }
.add-btn.disabled, .add-btn[disabled]{ border-color:var(--muted); color:var(--muted); cursor:not-allowed; }
.add-btn.disabled:hover{ background:transparent; color:var(--muted); box-shadow:none; }

/* ---------- shop toolbar / filtros / paginación ---------- */
.shop-toolbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding:26px 0; border-bottom:1px solid var(--line); margin-bottom:34px; }
.result-count{ font-size:12px; color:var(--muted); }
.sort-wrap{ display:flex; align-items:center; gap:10px; }
.sort-wrap label{ font-size:12px; color:var(--muted); }
.sort-select, select, input[type=text], input[type=email], input[type=tel], input[type=search], input[type=url], input[type=password], input[type=number], textarea{
  background:var(--form-bg, var(--panel)); color:var(--form-text, var(--text)); border:var(--form-border-width, 1px) solid var(--form-border, var(--line));
  border-radius:var(--radius); padding:9px 12px; font-family:var(--f-body); font-size:14px;
}
.sort-select, select{ font-family:var(--f-mono); font-size:12px; }
::placeholder{ color:var(--form-placeholder, var(--muted)); opacity:1; }
select:focus, input:focus, textarea:focus{ outline:none; border-color:var(--form-border-focus, var(--cyan)); box-shadow:0 0 0 2px rgba(0,240,255,.15); }

/* ---------- AVISOS (notices) — WooCommerce y formularios propios ---------- */
.woocommerce-message, .frognum-notice.success{ background:var(--notice-success-bg); color:var(--notice-success-text); border:none !important; border-radius:var(--radius); padding:14px 18px; }
.woocommerce-message a.button, .woocommerce-message::before{ color:var(--notice-success-text) !important; }
.woocommerce-error, .frognum-notice.error{ background:var(--notice-error-bg); color:var(--notice-error-text); border:none !important; border-radius:var(--radius); padding:14px 18px; }
.woocommerce-info, .frognum-notice.info{ background:var(--notice-info-bg); color:var(--notice-info-text); border:none !important; border-radius:var(--radius); padding:14px 18px 20px; margin-bottom:24px; }
#coupon_code{ text-transform:uppercase; }
.frognum-notice.warning{ background:var(--notice-warning-bg); color:var(--notice-warning-text); border-radius:var(--radius); padding:14px 18px; }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li{ list-style:none; margin:0; }
.woocommerce ul.woocommerce-error, .woocommerce ul.woocommerce-message, .woocommerce ul.woocommerce-info{ padding-left:18px; margin-left:0; }

.shop-layout{ display:grid; grid-template-columns:var(--shop-sidebar-width, 230px) 1fr; gap:36px; align-items:start; }
.shop-layout.sidebar-right{ grid-template-columns:1fr var(--shop-sidebar-width, 230px); }
.shop-layout.sidebar-right .filters{ order:2; }
.shop-layout.sidebar-right .shop-results{ order:1; }
.shop-layout.sidebar-none{ grid-template-columns:1fr; }
.shop-layout.sidebar-none .filters{ display:none; }
.filters{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:sticky; top:70px; display:flex; flex-direction:column; gap:24px; }
.filter-group h4{ font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--cyan); margin-bottom:12px; }
.filter-item{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--muted); padding:5px 0; cursor:pointer; }
.filter-item input{ accent-color:var(--pink); width:14px; height:14px; }
.filter-item span{ flex:1; }
.filter-item em{ font-style:normal; font-family:var(--f-mono); font-size:10px; color:var(--muted); opacity:.7; }
.filter-item:hover{ color:var(--text); }
.price-range .bar{ margin-bottom:8px; }
.price-labels{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:44px; margin-bottom:0; flex-wrap:wrap; font-family:var(--f-mono); }
/* Punto 6: acerca la paginación al footer cuando es lo último de la sección */
.section.has-pagination{ padding-bottom:30px; }
.pagination .page-numbers{ font-size:12px; padding:9px 14px; border:1px solid var(--line); border-radius:var(--radius); color:var(--muted); transition:all .15s ease; }
.pagination .page-numbers:hover{ border-color:var(--cyan); color:var(--cyan); }
.pagination .page-numbers.current{ background:var(--pink); border-color:var(--pink); color:#0a0c16; box-shadow:0 0 12px var(--pink); }
.pagination .page-numbers.dots{ border-color:transparent; }

/* =========================================================
   11. PRODUCTO INDIVIDUAL
   ========================================================= */
.product-layout{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-bottom:56px; width:100%; }
.product-gallery{ display:flex; flex-direction:column; gap:14px; position:sticky; top:20px; align-self:start; }
.gallery-main{ aspect-ratio:1/1; border-radius:var(--radius); border:1px solid var(--line); position:relative; overflow:hidden; background:repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 6px, transparent 6px 12px), linear-gradient(160deg,#1a1030,#0d0f1e); display:flex; align-items:center; justify-content:center; font-size:110px; }
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.thumb{ aspect-ratio:1/1; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); display:flex; align-items:center; justify-content:center; font-size:26px; cursor:pointer; overflow:hidden; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb.active{ border-color:var(--cyan); box-shadow:0 0 12px rgba(0,240,255,.35); }

.product-info{ display:flex; flex-direction:column; gap:16px; }
.product-title{ font-family:var(--f-display); font-size:var(--display-size-h2); color:var(--text); text-shadow:0 0 6px var(--pink), 0 0 18px rgba(255,47,176,.35); letter-spacing:var(--display-tracking); text-transform:uppercase; line-height:1.25; margin:4px 0 0; }
.rating-row{ display:flex; align-items:center; gap:10px; }
.stars{ color:var(--yellow); font-size:16px; letter-spacing:1px; text-shadow:0 0 6px rgba(247,255,61,.4); }
.rating-count{ font-size:12px; color:var(--muted); }
.product-price-block{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.save-badge{ font-size:11px; color:#0a0c16; background:var(--cyan); padding:4px 10px; border-radius:14px; box-shadow:0 0 10px var(--cyan); }
.product-desc{ font-size:16px; line-height:1.65; color:var(--muted); max-width:52ch; }

.option-group h4{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--cyan); margin-bottom:10px; }
.swatch-row{ display:flex; gap:10px; }
.swatch{ width:32px; height:32px; border-radius:50%; border:2px solid var(--line); cursor:pointer; }
.swatch.active{ border-color:var(--cyan); box-shadow:0 0 10px rgba(0,240,255,.5); }
.size-row{ display:flex; gap:8px; flex-wrap:wrap; }
.size-btn{ width:44px; height:40px; border-radius:var(--radius); border:1px solid var(--line); background:transparent; color:var(--text); font-family:var(--f-mono); font-size:13px; cursor:pointer; transition:all .15s ease; }
.size-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.size-btn.active{ background:var(--pink); border-color:var(--pink); color:#0a0c16; box-shadow:0 0 12px var(--pink); }
.size-btn.disabled{ opacity:.3; text-decoration:line-through; pointer-events:none; }
.size-guide-link{ font-size:11px; color:var(--muted); display:inline-block; margin-top:8px; }
.size-guide-link:hover{ color:var(--cyan); }

.purchase-row{ display:flex; gap:14px; align-items:stretch; margin-top:8px; flex-wrap:wrap; }
.qty-stepper{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.qty-btn{ width:38px; background:var(--panel); color:var(--text); border:none; font-size:16px; cursor:pointer; }
.qty-btn:hover{ color:var(--cyan); }
.qty-input, input.qty{ width:64px !important; text-align:center; padding-right:6px; background:transparent; border:none !important; border-left:1px solid var(--line) !important; border-right:1px solid var(--line) !important; color:var(--text); font-family:var(--f-mono); font-size:14px; }
.add-cart-btn{ flex:1; text-align:center; min-width:200px; }

.product-meta-list{ display:flex; flex-direction:column; gap:8px; margin-top:12px; padding-top:16px; border-top:1px solid var(--line); }
.product-meta-list div{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); gap:16px; }
.product-meta-list span:last-child{ color:var(--text); text-align:right; }

/* tabs producto */
.product-tabs{ margin-bottom:20px; width:100%; }
.tabs-nav{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:26px; flex-wrap:wrap; }
.tab-btn{ background:transparent; border:none; color:var(--muted); font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; padding:12px 18px; cursor:pointer; border-bottom:2px solid transparent; transition:all .15s ease; }
.tab-btn:hover{ color:var(--text); }
.tab-btn.active{ color:var(--cyan); border-bottom-color:var(--cyan); text-shadow:0 0 8px rgba(0,240,255,.4); }
.tab-panel{ display:none; max-width:70ch; font-size:16px; line-height:1.7; color:var(--text); }
.tab-panel.active{ display:block; }

/* reseñas / comentarios (compartido con blog) */
.comment{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }
.comment-head{ font-size:12px; color:var(--muted); margin-bottom:6px; display:flex; gap:8px; align-items:center; }
.comment-head strong{ color:var(--text); font-family:var(--f-mono); font-weight:600; }
.comment-body p{ font-size:15px; color:var(--text); opacity:.9; margin:0; line-height:1.55; }
.avatar{ width:26px; height:26px; border-radius:50%; background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:11px; box-shadow:0 0 8px rgba(139,92,246,.5); overflow:hidden; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar.big{ width:52px; height:52px; font-size:18px; }

/* =========================================================
   12. CARRITO
   ========================================================= */
.cart-layout{ display:grid; grid-template-columns:1fr 340px; gap:40px; align-items:start; margin-bottom:20px; }
.cart-row{ display:grid; grid-template-columns:64px 1fr auto auto auto; gap:18px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.cart-thumb{ width:64px; height:64px; border-radius:var(--radius); background:linear-gradient(160deg,#1a1030,#0d0f1e); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:28px; overflow:hidden; }
.cart-thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-info h4{ font-family:var(--f-display); font-size:14px; color:var(--text); letter-spacing:0; text-transform:none; margin-bottom:6px; line-height:1.3; }
.cart-variant{ font-size:11px; color:var(--muted); }
.cart-price{ font-size:14px; color:var(--yellow); text-shadow:0 0 6px rgba(247,255,61,.3); white-space:nowrap; }
.remove-btn{ width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:12px; transition:all .15s ease; }
.remove-btn:hover{ border-color:var(--pink); color:var(--pink); box-shadow:0 0 8px rgba(255,47,176,.4); }

.cart-summary, .checkout-summary{ display:flex; flex-direction:column; gap:14px; padding:24px; }
.summary-row{ display:flex; justify-content:space-between; font-size:14px; color:var(--muted); }
.summary-row span:last-child{ color:var(--text); }
.coupon-row{ display:flex; gap:8px; }
.coupon-input{ flex:1; min-width:0; }
.summary-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; border-top:1px solid var(--line); font-family:var(--f-display); font-size:18px; color:var(--text); text-transform:uppercase; }
.summary-total span:last-child{ color:var(--yellow); text-shadow:0 0 8px rgba(247,255,61,.4); }
.cart-secure{ font-size:11px; color:var(--muted); text-align:center; }

/* =========================================================
   13. CHECKOUT
   ========================================================= */
.checkout-steps{ display:flex; align-items:center; gap:10px; margin-top:18px; font-size:11px; flex-wrap:wrap; font-family:var(--f-mono); }
.step{ color:var(--muted); padding:6px 12px; border:1px solid var(--line); border-radius:16px; }
.step.done{ color:var(--cyan); border-color:var(--cyan); }
.step.active{ color:#0a0c16; background:var(--pink); border-color:var(--pink); box-shadow:0 0 10px var(--pink); }
.step-line{ width:24px; height:1px; background:var(--line); }

.checkout-layout{ display:grid; grid-template-columns:1fr 340px; gap:40px; align-items:start; }
.checkout-form{ display:flex; flex-direction:column; gap:32px; }
.form-block h4{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--cyan); margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
.field.span-2{ grid-column:1/-1; }

.payment-options{ display:flex; flex-direction:column; gap:10px; }
.payment-card{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; transition:all .15s ease; }
.payment-card:hover{ border-color:var(--cyan); }
.payment-card.active{ border-color:var(--pink); box-shadow:0 0 12px rgba(255,47,176,.25); background:rgba(255,47,176,0.04); }
.payment-card input{ accent-color:var(--pink); }
.pay-icon{ font-size:20px; }
.pay-label{ font-size:14px; color:var(--text); }
.pay-label em{ display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:2px; }

.mini-item{ display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center; font-size:12px; color:var(--muted); }
.mini-thumb{ width:32px; height:32px; border-radius:var(--radius); background:linear-gradient(160deg,#1a1030,#0d0f1e); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:15px; overflow:hidden; }
.mini-name{ color:var(--text); font-size:13px; }
.mini-name em{ font-style:normal; color:var(--muted); font-size:11px; }

/* =========================================================
   14. CAMPAÑA (insert coin)
   ========================================================= */
.coinpanel{ background:var(--panel); border:1px solid var(--yellow); border-radius:var(--radius); display:grid; grid-template-columns:1.4fr 1fr; box-shadow:0 0 24px rgba(247,255,61,0.15); }
.about-panel{ align-items:center; justify-content:center; padding:40px; gap:40px; grid-template-columns:40% 60%; background:linear-gradient(160deg, #171b2e, #0f1120); border-color:var(--yellow); }
.about-panel .coin-main{ width:100%; }
.about-panel.align-left{ grid-template-columns:40% 60%; }
.about-photo{ display:flex; align-items:center; justify-content:center; }
.about-photo-circle{ width:180px; height:180px; border-radius:50%; object-fit:cover; border:3px solid var(--yellow); box-shadow:0 0 20px rgba(247,255,61,.4); }
@media (max-width:700px){ .about-panel, .about-panel.align-left{ grid-template-columns:1fr; text-align:center; } }
.coin-main{ padding:38px; }
.coin-main h3{ font-size:22px; color:var(--text); margin:16px 0 12px; }
.coin-main p{ color:var(--muted); font-size:17px; line-height:1.55; max-width:52ch; }
.coin-side{ padding:38px; border-left:1px dashed var(--line); display:flex; flex-direction:column; justify-content:center; gap:14px; }
.progress-label{ font-family:var(--f-mono); font-size:12px; color:var(--muted); display:flex; justify-content:space-between; }
.bar{ height:12px; background:#0a0c16; border:1px solid var(--yellow); border-radius:var(--radius); overflow:hidden; }
.bar-fill{ height:100%; background:var(--yellow); box-shadow:0 0 10px var(--yellow); }

/* =========================================================
   15. BLOG — listado, destacado, tag chips
   ========================================================= */
.tag-filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.tag-chip{ font-family:var(--f-mono); font-size:12px; padding:8px 16px; border-radius:20px; border:1px solid var(--line); color:var(--muted); background:transparent; cursor:pointer; transition:all .15s ease; }
.tag-chip:hover{ border-color:var(--cyan); color:var(--cyan); }
.tag-chip.active{ background:var(--pink); border-color:var(--pink); color:#0a0c16; box-shadow:0 0 12px var(--pink); }
.tag-filter-row-cyan{ margin-top:12px; }
.tag-chip.cyan{ border-color:var(--cyan); color:var(--cyan); }
.tag-chip.cyan.active{ background:var(--cyan); border-color:var(--cyan); color:#0a0c16; box-shadow:0 0 12px var(--cyan); }

.post-feature{ display:grid; grid-template-columns:1fr 1.3fr; gap:0; align-items:stretch; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:44px; }
.post-feature-window{ height:auto; width:100%; border-radius:var(--radius) 0 0 var(--radius); }
.post-feature-window{ aspect-ratio:16/9; background:linear-gradient(160deg,#1a1030,#0d0f1e); display:flex; align-items:center; justify-content:center; font-size:80px; overflow:hidden; }
.post-feature-window img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.post-feature-body{ border-radius:0 var(--radius) var(--radius) 0; }
.post-feature-body{ padding:34px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.post-feature-body h2{ font-family:var(--f-display); font-size:22px; color:var(--text); letter-spacing:0; text-transform:none; line-height:1.3; }
/* Refuerzo: el título de cualquier tarjeta "post-feature" SIEMPRE
   hereda el color de su propio h2, sin importar si termina anidado
   (por HTML mal cerrado en el contenido del editor, por ejemplo)
   dentro de algo como .article-body, que trae su propia regla de
   color para enlaces genéricos. Sin esto, esa regla de prosa le gana
   por especificidad al color heredado del h2 y el título cambia de
   color inesperadamente (y con él, cualquier text-shadow heredado). */
.post-feature-body h2 a{ color:inherit !important; font-family:inherit !important; font-size:inherit !important; text-decoration:none !important; }
.post-feature-body p{ color:var(--muted); font-size:16px; line-height:1.55; margin:0; }
.post-meta{ font-size:11px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; }

.post-grid{ display:grid; grid-template-columns:repeat(var(--blog-columns, 3), 1fr); gap:26px; margin-bottom:20px; }
.post-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:all .18s ease; }
.post-card:hover{ border-color:var(--cyan); box-shadow:0 0 20px rgba(0,240,255,0.22); transform:translateY(-3px); }
.post-window{ aspect-ratio:16/9; background:linear-gradient(160deg,#1a1030,#0d0f1e); display:flex; align-items:center; justify-content:center; font-size:44px; position:relative; border-bottom:1px solid var(--line); overflow:hidden; border-radius:var(--radius) var(--radius) 0 0; }
.post-window img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.post-window .badge{ position:absolute; bottom:10px; left:10px; top:auto; }
.post-body{ padding:18px; }
.post-body h3{ font-family:var(--f-display); font-size:16px; color:var(--text) !important; letter-spacing:0; text-transform:none; line-height:1.35; margin-bottom:10px; }
.post-body h3 a{ color:inherit !important; font-family:inherit !important; font-size:inherit !important; text-decoration:none !important; }
.post-body p{ color:var(--muted); font-size:15px; line-height:1.5; margin:0 0 14px; }

/* =========================================================
   16. ARTÍCULO INDIVIDUAL
   ========================================================= */
.shop-hero{ padding:44px 24px 30px; border-bottom:1px solid var(--line); }
.breadcrumb{ font-size:12px; color:var(--muted); margin-bottom:16px; }
.breadcrumb span{ color:var(--line); margin:0 6px; }
.breadcrumb em{ font-style:normal; color:var(--cyan); }
.shop-title{ font-family:var(--f-display); font-size:var(--display-size-h2); color:var(--text); text-shadow:0 0 6px var(--pink), 0 0 20px rgba(255,47,176,.4); margin-bottom:14px; }
.shop-sub{ color:var(--muted); font-size:18px; max-width:60ch; line-height:1.5; margin:0; }

.article-title{ font-family:var(--content-h1-font, var(--f-display)); font-size:var(--content-h1-size, calc(var(--display-size-hero) * 0.85)); font-weight:var(--content-h1-weight, inherit); color:var(--text); text-shadow:0 0 6px var(--pink), 0 0 20px rgba(255,47,176,.4); line-height:1.25; margin-bottom:18px; }
.article-meta{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; flex-wrap:wrap; margin-bottom:28px; }
.author{ display:flex; align-items:center; gap:8px; }
.article-hero-window{ aspect-ratio:21/8; background:repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 6px, transparent 6px 12px), linear-gradient(160deg,#1a1030,#0d0f1e); border:1px solid var(--line); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:90px; overflow:hidden; color:var(--cyan); }
/* Cuando SÍ hay imagen destacada, se muestra a su alto completo (sin
   recorte forzado): se abandona el aspect-ratio fijo de 21/8 (pensado
   solo para el fallback sin imagen) y el <img> define su propio alto
   natural. Los videos (single-video.php / single-videoresena.php) no
   tienen <img> aquí (usan iframe) y traen su propio aspect-ratio
   inline, así que no se ven afectados por esta regla. */
.article-hero-window:has(img){ aspect-ratio:auto; height:auto; }
.article-hero-window img{ width:100%; height:auto; display:block; border-radius:inherit; }
.article-hero-window iframe, .article-hero-window .wp-embed-responsive iframe{ width:100%; height:100%; border:0; display:block; }

.article-layout{ display:grid; grid-template-columns:1fr var(--sidebar-width, 300px); gap:44px; align-items:start; }
.article-layout.sidebar-left{ grid-template-columns:var(--sidebar-width, 300px) 1fr; }
.article-layout.sidebar-left .article-body{ order:2; }
.article-layout.sidebar-left .article-sidebar{ order:1; }
.article-layout.no-sidebar{ grid-template-columns:1fr; }
/* El límite de ancho de lectura (70ch) se aplica a los elementos de
   TEXTO, no al contenedor completo — así, un bloque ancho (grilla de
   Entradas Frognum, imagen, embed, etc.) puede usar todo el ancho
   disponible de la columna, mientras los párrafos siguen siendo
   cómodos de leer. Antes, .article-body{max-width:70ch} angostaba
   TODO lo que hubiera adentro, bloques anchos incluidos — se notaba
   sobre todo con el sidebar oculto, donde .article-layout.no-sidebar
   además centraba ese mismo ancho angosto en medio de la página. */
.article-body{ font-size:18px; line-height:1.7; color:var(--text); font-family:var(--f-body); }
.article-body > p, .article-body > ul, .article-body > ol, .article-body > blockquote,
.article-body > h2, .article-body > h3, .article-body > h4, .article-body > h5, .article-body > h6,
.article-body > .wp-block-paragraph, .article-body > .wp-block-list, .article-body > .wp-block-quote,
.article-body > .wp-block-heading, .article-body > .wp-block-embed, .article-body > figure.wp-caption{
	max-width:70ch; margin-left:auto !important; margin-right:auto !important;
}
.article-body a:not(.btn):not(.btn-orange):not(.pill-link){ color:#ff6a00; text-decoration:underline; text-underline-offset:3px; }
.article-body a:not(.btn):not(.btn-orange):not(.pill-link):hover{ color:#ff9142; }
.article-body iframe, .article-body embed, .article-body video{ max-width:100%; width:100%; border:0; border-radius:var(--radius); }

/* .video-container: clase usada por el insertador de bloques de
   Gutenberg (bloque "Insertar código") al pegar un embed — se perdió
   al cambiar de theme, se recrea aquí con el patrón estándar de video
   responsivo (16:9) + el ancho y márgenes pedidos. */
.video-container{
	position:relative; width:100%; height:0; padding-bottom:56.25%; overflow:hidden;
	margin-top:100px; margin-bottom:100px; border-radius:var(--radius); background:#000;
}
.video-container iframe, .video-container embed, .video-container object, .video-container video{
	position:absolute; top:0; left:0; width:100%; height:100%; border:0;
}

/* Tablas dentro del contenido (bloque Tabla de Gutenberg, etc.) */
.article-body table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:15px; }
.article-body table th, .article-body table td{ padding:12px 14px; border:1px solid var(--line); text-align:left; }
.article-body table th{
	font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em;
	color:var(--cyan); background:rgba(0,240,255,0.08);
}
.article-body table tbody tr:nth-child(even){ background:rgba(255,255,255,0.03); }
.article-body table tbody tr:hover{ background:rgba(0,240,255,0.06); }
.article-body table caption{ caption-side:bottom; font-size:12px; color:var(--muted); margin-top:8px; text-align:left; }

/* Alineación de bloques (imagen, embed, etc.) — WordPress core solo
   trae ".aligncenter{clear:both;}"; el centrado/flotado real depende
   siempre del theme, y nunca lo habíamos agregado. */
.article-body .aligncenter{ display:block; margin-left:auto; margin-right:auto; text-align:center; }
.article-body .aligncenter img{ margin-left:auto; margin-right:auto; }
.article-body .alignleft{ float:left; margin:6px 24px 16px 0; max-width:50%; }
.article-body .alignright{ float:right; margin:6px 0 16px 24px; max-width:50%; }
.article-body .alignwide{ max-width:calc(70ch + 200px); margin-left:calc(50% - 35ch - 100px); width:100%; }
.article-body .alignfull{ max-width:100vw; margin-left:calc(50% - 50vw); width:100vw; }
.article-body figure{ margin:0 0 24px; }
.article-body figcaption{ font-size:13px; color:var(--muted); text-align:center; margin-top:8px; }

/* Bloque "Entradas Frognum" (Gutenberg, scroll infinito) */
.frognum-entradas-list .post-feature{ margin-bottom:28px; }
/* Refuerzo defensivo: el CSS de bloques de WordPress a veces compite
   en especificidad con el nuestro dentro del contexto del editor de
   bloques — se repite explícitamente el layout aquí, con más
   especificidad, para garantizar que la tarjeta se vea igual que la
   Historia Destacada del home. */
.frognum-entradas-block .post-feature{
	display:grid !important; grid-template-columns:1fr 1.3fr !important; align-items:stretch !important;
	height:250px !important; overflow:hidden !important;
}
.frognum-entradas-block .post-feature-window{
	height:100% !important; width:100%; position:relative; border:none !important; border-radius:var(--radius) 0 0 var(--radius) !important;
}
.frognum-entradas-block .post-feature-window img{ width:100% !important; height:100% !important; object-fit:cover !important; position:static !important; opacity:1 !important; }
.frognum-entradas-block .post-feature-body{
	position:static !important; opacity:1 !important; overflow:hidden;
	display:flex !important; flex-direction:column !important; justify-content:flex-start !important; align-items:flex-start !important;
	padding:18px 22px 20px 30px !important; gap:6px !important; height:100%; box-sizing:border-box; text-align:left;
}
.frognum-entradas-block .post-feature-body h2{
	font-size:18px !important; line-height:1.25; margin:0; text-align:left;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.frognum-entradas-block .post-feature-body p{
	display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
	margin:0; font-size:14px; text-align:left;
}
.frognum-entradas-block .post-feature-body .post-meta{ font-size:11px; }
.frognum-entradas-block .post-feature-body .btn{ margin-top:auto; align-self:flex-start !important; padding:8px 16px; font-size:12px; }
@media (max-width:700px){ .frognum-entradas-block .post-feature{ height:auto !important; } }
.frognum-entradas-sentinel{ height:1px; }
.frognum-entradas-block-preview{ background:var(--panel); border:1px dashed var(--line); border-radius:var(--radius); padding:20px; text-align:center; }

/* Bloque "Entrada Relacionada" — mismo refuerzo defensivo que el
   bloque de scroll infinito (el CSS de Gutenberg puede competir en
   especificidad dentro del contexto de un bloque dinámico).
   Se usan grid-template-areas + posición explícita de cada hijo (en
   vez de depender del auto-placement por columnas) y un z-index +
   fondo opaco en el cuerpo de texto, como refuerzo: así, incluso si
   algo externo llegara a hacer que ambos hijos cayan en la misma
   celda, el texto seguiría mostrándose SOBRE la imagen con su propio
   fondo, nunca transparente/superpuesto ilegible. */
.frognum-entrada-relacionada .post-feature{
	display:grid !important;
	grid-template-columns:40% 60% !important;
	grid-template-areas:"img body" !important;
	align-items:stretch !important;
	isolation:isolate;
	position:relative !important;
}
.frognum-entrada-relacionada .post-feature-window{
	grid-area:img !important; grid-column:1 !important; grid-row:1 !important;
	position:relative !important; z-index:1; aspect-ratio:16/9 !important; height:auto !important; width:100% !important;
}
.frognum-entrada-relacionada .post-feature-window img{ width:100% !important; height:100% !important; object-fit:cover !important; position:static !important; opacity:1 !important; }
.frognum-entrada-relacionada .post-feature-body{
	grid-area:body !important; grid-column:2 !important; grid-row:1 !important;
	position:relative !important; z-index:2; opacity:1 !important; background:var(--panel) !important;
}
@media (max-width:700px){
	.frognum-entrada-relacionada .post-feature{ grid-template-columns:1fr !important; grid-template-areas:"img" "body" !important; }
	.frognum-entrada-relacionada .post-feature-window{ grid-column:1 !important; grid-row:1 !important; aspect-ratio:16/9 !important; }
	.frognum-entrada-relacionada .post-feature-body{ grid-column:1 !important; grid-row:2 !important; }
}

/* "Entrada destacada" de la plantilla Scroll Infinito (page-scroll-
   infinito.php): título en tono cyan (sin el text-shadow heredado de
   .article-body h2, que se veía como un halo/"fondo sólido" detrás
   del texto al combinarse con el color equivocado del link). */
.frognum-si-featured .post-feature-body h2{ color:var(--cyan) !important; text-shadow:none !important; }

/* Defensivo: si el contenido fue pegado desde Word/Google Docs, a
   veces trae font-family en línea en cada párrafo (style="font-family:
   Georgia..."), que gana por especificidad sobre cualquier CSS nuestro.
   Esto fuerza la tipografía elegida en el Customizer de todas formas. */
.article-body, .article-body *{ font-family:var(--f-body) !important; }
/* Tipografías de H1 a H5 y Párrafos configurables por separado desde
   Personalizar → Tipografía (antes, H1-H4 quedaban todos forzados a
   --f-display sin poder diferenciarse entre sí, y el tamaño de H2/H3
   estaba fijo en 20px). H1 es .article-title (el título de la propia
   entrada/página) — un <h1> real dentro del contenido es poco común
   pero se cubre igual por si el editor llega a insertar uno. */
.article-body h1{ font-family:var(--content-h1-font, var(--f-display)) !important; font-size:var(--content-h1-size, 38px) !important; font-weight:var(--content-h1-weight, inherit) !important; }
.article-body h2{ font-family:var(--content-h2-font, var(--f-display)) !important; font-size:var(--content-h2-size, 26px) !important; font-weight:var(--content-h2-weight, inherit) !important; }
.article-body h3{ font-family:var(--content-h3-font, var(--f-display)) !important; font-size:var(--content-h3-size, 21px) !important; font-weight:var(--content-h3-weight, inherit) !important; }
.article-body h4{ font-family:var(--content-h4-font, var(--f-display)) !important; font-size:var(--content-h4-size, 18px) !important; font-weight:var(--content-h4-weight, inherit) !important; }
.article-body h5{ font-family:var(--content-h5-font, var(--f-display)) !important; font-size:var(--content-h5-size, 16px) !important; font-weight:var(--content-h5-weight, inherit) !important; }
.article-body code, .article-body pre{ font-family:var(--f-mono) !important; }
/* Botones insertados en el contenido (ej. bloque "Botón" de Gutenberg
   con la clase .btn agregada a mano): quedan centrados con 20px de
   separación respecto al texto anterior, en vez de pegados a la
   izquierda. */
.article-body .btn, .article-body .btn-orange, .article-body .wp-block-button__link{
  display:block; width:fit-content; margin:20px auto 0 !important;
}
.article-body .wp-block-buttons{ justify-content:center; margin-top:20px; }
.article-body p{ font-family:var(--content-p-font, var(--f-body)) !important; font-size:var(--content-p-size, 18px) !important; margin:0 0 20px; opacity:.92; }
.article-body h2, .article-body h3{ color:var(--cyan); margin:36px 0 16px; letter-spacing:0; text-transform:none; text-shadow:0 0 8px rgba(0,240,255,.3); }
.article-body blockquote{ border-left:3px solid var(--pink); margin:32px 0; padding:6px 0 6px 24px; font-family:var(--f-display); font-size:19px; text-transform:none; letter-spacing:0; color:var(--text); line-height:1.5; }
.article-body img{ border-radius:var(--radius); border:1px solid var(--line); margin:8px 0; }
.article-body figcaption, .caption{ font-size:12px; color:var(--muted); text-align:center; margin:10px 0 0; }
.tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin:36px 0; }
.tag-pill{ font-family:var(--f-mono); font-size:11px; border:1px solid var(--line); color:var(--muted); padding:5px 12px; border-radius:16px; }
.author-box{ display:flex; gap:16px; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-top:20px; }
.author-box h4{ font-family:var(--f-mono); font-size:13px; color:var(--text); margin:0 0 6px; text-transform:none; }
.author-box p{ font-size:14px; color:var(--muted); margin:0; line-height:1.5; }
.toc-link{ display:block; font-size:13px; color:var(--muted); padding:6px 0; border-bottom:1px dashed var(--line); }
.toc-link:hover{ color:var(--cyan); }
.comments-section{ margin-top:60px; max-width:70ch; }

/* =========================================================
   17. GALERÍA VERTICAL + LIGHTBOX
   ========================================================= */
.photo-masonry{ display:grid; grid-template-columns:repeat(var(--photo-cols, 4), 1fr); gap:18px; }
.photo-item{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); position:relative; cursor:pointer; background:linear-gradient(160deg,#1a1030,#0d0f1e); transition:all .18s ease; }
.photo-item:hover{ border-color:var(--cyan); box-shadow:0 0 20px rgba(0,240,255,0.25); transform:translateY(-2px); }
.photo-item img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1; }

/* Al pasar el mouse: la imagen se desenfoca y la info (promoción,
   marca, año) aparece centrada, cada dato en su propia línea — igual
   estilo que el resto de los links neón del sitio. */
.photo-hover-info{ position:relative; display:block; }
.photo-hover-info img{ transition:filter .2s ease; }
.photo-hover-info:hover img{ filter:blur(4px) brightness(.6); }
.photo-hover-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-align:center; padding:16px; opacity:0; transition:opacity .2s ease; pointer-events:none;
  color:var(--cyan); text-shadow:0 0 8px var(--cyan);
}
.photo-hover-info:hover .photo-hover-overlay{ opacity:1; }
.photo-hover-overlay span{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; }

.gallery-featured-title{ font-family:var(--f-display); font-size:20px; color:var(--text); margin:26px 0 16px; }

.photo-caption{ position:absolute; left:0; right:0; bottom:0; padding:20px 12px 10px; background:linear-gradient(to top, rgba(0,0,0,0.85), transparent); color:var(--text); font-size:11px; opacity:0; transition:opacity .18s ease; }
.photo-item:hover .photo-caption{ opacity:1; }

.lightbox{ display:none; position:fixed; inset:0; background:rgba(5,6,12,0.92); z-index:200; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.lightbox.open{ display:flex; }
.lb-content{ display:flex; flex-direction:column; align-items:center; gap:16px; max-width:80vw; }
.lb-face{ max-width:min(80vw,600px); max-height:80vh; border:1px solid var(--cyan); border-radius:12px; box-shadow:0 0 40px rgba(0,240,255,0.25); }
.lb-caption{ color:var(--text); font-size:13px; opacity:.85; }
.lb-close{ position:absolute; top:24px; right:28px; background:transparent; border:1px solid var(--line); color:var(--text); width:38px; height:38px; border-radius:50%; font-size:16px; cursor:pointer; }
.lb-close:hover{ border-color:var(--pink); color:var(--pink); }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); background:transparent; border:1px solid var(--line); color:var(--text); width:46px; height:46px; border-radius:50%; font-size:22px; cursor:pointer; }
.lb-nav:hover{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 12px rgba(0,240,255,.4); }
.lb-prev{ left:28px; } .lb-next{ right:28px; }

/* =========================================================
   18. FOOTER (widgets 1–4 columnas configurable)
   ========================================================= */
.site-footer{ background:var(--bg2); border-top:1px solid var(--line); padding:54px 24px 28px; margin-top:10px; }
.footer-widgets{ display:grid; gap:40px; max-width:var(--container); margin:0 auto; }
.footer-social{ display:flex; flex-wrap:wrap; gap:16px; }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center; color:var(--muted);
  width:calc(var(--footer-social-size, 16px) * 2.2); height:calc(var(--footer-social-size, 16px) * 2.2);
  border-radius:50%; background:var(--panel); border:1px solid var(--line); transition:all .2s ease; flex-shrink:0;
}
.footer-social a span{ font-size:var(--footer-social-size, 16px); line-height:1; }
.footer-social a .social-icon{ display:flex; align-items:center; justify-content:center; }
.footer-social a .social-icon svg{ width:calc(var(--footer-social-size, 16px) * 0.9); height:calc(var(--footer-social-size, 16px) * 0.9); }
.footer-social a[title="YouTube"]{ background:#ff0000; border-color:#ff0000; color:#fff; }
.footer-social a[title="YouTube"]:hover{ box-shadow:0 0 16px #ff0000; transform:translateY(-2px); }
.footer-social a[title="Instagram"]{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color:#dc2743; color:#fff; }
.footer-social a[title="Instagram"]:hover{ box-shadow:0 0 16px #dc2743; transform:translateY(-2px); }
.footer-social a[title="TikTok"]{ background:#0a0c16; border-color:var(--line); }
.footer-social a[title="TikTok"]:hover{ box-shadow:0 0 16px #ffffff; transform:translateY(-2px); }
.footer-social a[title="Patreon"]{ background:#000000; border-color:#000000; color:#fff; }
.footer-social a[title="Patreon"]:hover{ box-shadow:0 0 16px #ff424d; transform:translateY(-2px); }
.footer-social a[title="Facebook"]{ background:#1877f2; border-color:#1877f2; color:#fff; }
.footer-social a[title="Facebook"]:hover{ box-shadow:0 0 16px #1877f2; transform:translateY(-2px); }
.footer-social a[title="Email"], .footer-social a[title="WhatsApp"]{ background:var(--panel); }
.footer-social a[title="Email"]:hover{ box-shadow:0 0 16px var(--cyan); border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }
.footer-social a[title="WhatsApp"]{ background:#25d366; border-color:#25d366; color:#fff; }
.footer-social a[title="WhatsApp"]:hover{ box-shadow:0 0 16px #25d366; transform:translateY(-2px); }
.footer-widgets.cols-1{ grid-template-columns:1fr; }
.footer-widgets.cols-2{ grid-template-columns:repeat(2,1fr); }
.footer-widgets.cols-3{ grid-template-columns:repeat(3,1fr); }
.footer-widgets.cols-4{ grid-template-columns:repeat(4,1fr); }
.footer-widgets .widget h2, .footer-widgets .widget h3, .footer-widgets .widget h4{
  font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--cyan); margin-bottom:14px; font-weight:400;
}
.footer-widgets .widget{ margin-bottom:30px; }
.footer-widgets .widget:last-child{ margin-bottom:0; }
.footer-widgets .widget p, .footer-widgets .widget li{ font-size:14px; line-height:1.6; color:var(--muted); }
.footer-widgets .widget ul{ list-style:none; margin:0; padding:0; }
.footer-widgets .widget ul li{ padding:6px 0; border-bottom:1px solid var(--line); }
.footer-widgets .widget ul li:last-child{ border-bottom:none; }
.footer-widgets .widget a:hover{ color:var(--cyan); }
.footer-widgets .widget select,
.footer-widgets .widget input[type="text"],
.footer-widgets .widget input[type="search"],
.footer-widgets .widget input[type="email"]{
  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:6px; color:var(--text); padding:9px 12px; font-size:13px;
}
.footer-widgets .widget .search-form{ display:flex; gap:8px; }
.footer-widgets .widget .search-form .search-submit{
  font-family:var(--f-mono); font-size:11px; text-transform:uppercase; border:1px solid var(--cyan); color:var(--cyan);
  background:transparent; border-radius:6px; padding:0 16px; cursor:pointer; white-space:nowrap;
}
.footer-widgets .widget .search-form .search-submit:hover{ background:var(--cyan); color:#0a0c16; }
.footer-widgets .widget img{ max-width:100%; border-radius:6px; }
.tagcloud{ display:flex; flex-wrap:wrap; gap:8px; }
.tagcloud span, .tagcloud a{ font-family:var(--f-mono); font-size:11px; border:1px solid rgba(139,150,184,.4); color:var(--muted); padding:4px 10px; border-radius:20px; }
.foot-bottom{ max-width:var(--container); margin:40px auto 0; padding-top:20px; border-top:1px solid rgba(139,150,184,.2); font-family:var(--f-mono); font-size:11px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* =========================================================
   20. ETIQUETAS DE PRODUCTO (Oferta / Nuevo) — Grupo 2
   ========================================================= */
.product-label{
  position:absolute; top:-16px; left:14px; z-index:3;
  font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:-0.02em;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center; text-align:center;
  color:#0a0c16; box-shadow:0 4px 10px rgba(0,0,0,.4);
  border:2px solid var(--bg2);
  /* El tamaño de fuente se adapta al ancho del texto vs. el círculo fijo,
     así "-45%", "NUEVO" u "OFERTA" siempre caben sin deformar el globo. */
  font-size:10px;
  line-height:1.05;
}
.product-label.label-shape-circle{ border-radius:50%; }
.product-label.label-shape-square{ width:auto; min-width:36px; padding:0 10px; border-radius:0; }
.product-label.label-shape-rounded{ width:auto; min-width:36px; padding:0 10px; border-radius:6px; }
.product-label.label-sale{ background:var(--label-sale-bg, var(--pink)); left:auto; right:14px; }
.product-label.label-new{ background:var(--label-new-bg, var(--cyan)); }
/* Texto largo (ej. "OFERTA" en vez de "-20%"): reduce aún más la fuente
   solo cuando el shape es círculo, para que nunca se salga del borde. */
.product-label.label-shape-circle.label-text-long{ font-size:8px; letter-spacing:-0.03em; }

/* Al pasar el mouse por la tarjeta, el globo se enciende igual que el
   botón "Quiero donar" del footer (glow intenso del mismo color). */
.product:hover .product-label{ box-shadow:0 0 16px currentColor, 0 4px 10px rgba(0,0,0,.4); }
.product:hover .product-label.label-sale{ color:#0a0c16; box-shadow:0 0 16px var(--label-sale-bg, var(--pink)), 0 4px 10px rgba(0,0,0,.4); }
.product:hover .product-label.label-new{ color:#0a0c16; box-shadow:0 0 16px var(--label-new-bg, var(--cyan)), 0 4px 10px rgba(0,0,0,.4); }

/* =========================================================
   21. VISTA RÁPIDA (Quick View) — Grupo 2
   ========================================================= */
.quick-view-btn{
  position:absolute; bottom:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%;
  background:var(--bg2); border:1px solid var(--line); color:var(--text); font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(6px);
  transition:all .18s ease;
}
.product:hover .quick-view-btn{ opacity:1; transform:translateY(0); }
.quick-view-btn:hover{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 10px rgba(0,240,255,.4); }

.qv-modal{
  display:none; position:fixed; inset:0; z-index:300; align-items:center; justify-content:center;
  background:rgba(5,6,12,0.85); backdrop-filter:blur(4px); padding:24px;
}
.qv-modal.open{ display:flex; }
.qv-modal-box{
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius); max-width:var(--qv-width, 900px);
  width:100%; max-height:88vh; overflow:auto; position:relative; padding:30px;
}
.qv-modal-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--text); cursor:pointer; font-size:14px; z-index:2;
}
.qv-modal-close:hover{ border-color:var(--pink); color:var(--pink); }
.qv-modal-loading{ text-align:center; padding:60px 0; color:var(--muted); font-family:var(--f-mono); font-size:13px; }
.qv-horizontal{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.qv-vertical{ display:flex; flex-direction:column; gap:24px; }
.qv-image{ aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius); }
.qv-image img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius); display:block; }
.qv-info .product-title{ font-family:var(--f-display); font-size:22px; color:var(--text); text-transform:uppercase; margin-bottom:14px; }
.qv-info .price{ font-family:var(--price-font, var(--f-mono)); font-size:22px; color:var(--yellow); margin-bottom:14px; }
.qv-desc{ color:var(--muted); font-size:15px; line-height:1.6; margin-bottom:16px; }
@media (max-width:700px){ .qv-horizontal{ grid-template-columns:1fr; } }

/* =========================================================
   22. BARRA DE ENVÍO GRATUITO — Grupo 2
   ========================================================= */
.free-shipping-bar{
  background:var(--fsb-box-bg, #f7ff3d); border:none; border-radius:var(--radius); padding:16px 20px; margin-bottom:24px;
  box-shadow:0 0 20px rgba(247,255,61,0.35);
}
.free-shipping-bar .fsb-message{ font-family:var(--f-body); font-size:14px; color:#0a0c16; font-weight:600; margin:0 0 10px; }
.free-shipping-bar.is-reached .fsb-message{ color:#0a0c16; }
.free-shipping-bar .bar{ height:10px; background:var(--fsb-track-bg, #0a0c16); border:1px solid rgba(10,12,22,0.3); border-radius:99px; overflow:hidden; }
.free-shipping-bar .bar-fill{
  height:100%; background-color:var(--fsb-fill-color, #ff2fb0);
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0.35) 0 8px, transparent 8px 16px);
  box-shadow:0 0 10px var(--fsb-fill-color, #ff2fb0); transition:width .3s ease;
}
.free-shipping-bar.is-reached .bar-fill{ background-color:#22c55e; box-shadow:0 0 10px #22c55e; }

/* =========================================================
   19. RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .grid{ grid-template-columns:1fr 1fr; }
  .cabinets{ grid-template-columns:1fr 1fr; }
  .shop-grid, .shop-grid-home{ grid-template-columns:1fr 1fr; }
  .post-grid{ grid-template-columns:1fr 1fr; }
  .post-feature{ grid-template-columns:1fr; }
  .frognum-entradas-block .post-feature{ grid-template-columns:1fr !important; }
  .coinpanel{ grid-template-columns:1fr; }
  .coin-side{ border-left:none; border-top:1px dashed var(--line); }
  .footer-widgets.cols-2, .footer-widgets.cols-3, .footer-widgets.cols-4{ grid-template-columns:1fr 1fr; }
  .shop-layout{ grid-template-columns:1fr; }
  .filters{ position:static; }
  .product-layout{ grid-template-columns:1fr; }
  .cart-layout{ grid-template-columns:1fr; }
  .checkout-layout{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .article-layout{ grid-template-columns:1fr; }
  .photo-masonry{ grid-template-columns:repeat(2,1fr); }
  .cart-row{ grid-template-columns:48px 1fr; row-gap:10px; }
}
@media (max-width:560px){
  .grid, .cabinets, .shop-grid, .post-grid{ grid-template-columns:1fr; }
  .footer-widgets.cols-2, .footer-widgets.cols-3, .footer-widgets.cols-4{ grid-template-columns:1fr; }
  :root{ --display-size-hero:24px; }
}

/* =========================================================
   BLOQUE "IMAGEN (FROGNUM)"
   ========================================================= */
.frognum-image-block{ text-align:center; }
.frognum-image-block-img{ max-width:100%; height:auto; display:inline-block; }
a.frognum-image-lightbox{ display:inline-block; cursor:pointer; }
a.frognum-image-lightbox .frognum-image-block-img{ display:block; }
.frognum-image-block-caption{
	font-family:var(--f-body); font-size:16px; font-style:italic; color:var(--muted);
	text-align:center; margin-top:10px;
}
.frognum-image-block-editor-actions{ display:flex; gap:8px; justify-content:center; margin-top:8px; }

/* =========================================================
   BLOQUE "ENTRADAS FROGNUM" — Grilla en tarjetas cuadradas (1:1)
   ========================================================= */
.grid-square-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:all .18s ease; }
.grid-square-card:hover{ border-color:var(--cyan); box-shadow:0 0 20px rgba(0,240,255,0.22); transform:translateY(-3px); }
.grid-square-window{ aspect-ratio:1/1; background:linear-gradient(160deg,#1a1030,#0d0f1e); display:flex; align-items:center; justify-content:center; font-size:44px; position:relative; border-bottom:1px solid var(--line); overflow:hidden; }
.grid-square-window img{ width:100%; height:100%; object-fit:cover; }
.grid-square-window .badge{ position:absolute; bottom:10px; left:10px; top:auto; }
.grid-square-body{ padding:16px; }
.grid-square-body h3{ font-family:var(--f-display); font-size:15px; color:var(--cyan); letter-spacing:0; text-transform:none; line-height:1.35; margin-bottom:8px; }
.grid-square-body h3 a{ color:inherit !important; text-decoration:none; }
.frognum-entradas-list.grid-style-square{ display:grid; gap:24px; }
.frognum-entradas-list.grid-style-horizontal{ display:grid; gap:24px; }
@media (max-width:700px){
	.frognum-entradas-list.grid-style-square{ grid-template-columns:repeat(2,1fr) !important; }
	.frognum-entradas-list.grid-style-horizontal{ grid-template-columns:1fr !important; }
}

/* =========================================================
   BLOQUE "AVISO" — banner horizontal Urgente/Semi-urgente/Normal
   ========================================================= */
.frognum-aviso{
	display:block; width:100%; box-sizing:border-box;
	padding:14px 28px; margin:24px 0; border-radius:var(--radius);
	font-family:var(--f-body); font-size:16px; font-weight:600; line-height:1.5;
	text-align:center; color:#fff;
}
.frognum-aviso a{ color:#fff; text-decoration:underline; }
.frognum-aviso-urgent{ background:#ff0044; box-shadow:0 0 24px rgba(255,0,68,0.6); }
.frognum-aviso-semi{ background:#ffb300; box-shadow:0 0 24px rgba(255,179,0,0.55); }
.frognum-aviso-normal{ background:#00e676; box-shadow:0 0 24px rgba(0,230,118,0.5); }

/* =========================================================
   BLOQUE "GALERÍA FROGNUM" — grilla o carrusel automático, con lightbox
   ========================================================= */
.frognum-galeria-grid{ display:grid; grid-template-columns:repeat(var(--frognum-gal-cols,3),1fr); gap:var(--frognum-gal-gap,10px); }
.frognum-galeria-grid .frognum-galeria-item{ display:block; border-radius:var(--radius); overflow:hidden; cursor:pointer; }
.frognum-galeria-grid .frognum-galeria-item img{ width:100%; height:auto; display:block; }

.frognum-galeria-carousel-wrap{ position:relative; display:flex; align-items:center; gap:10px; max-width:100%; margin:0 auto; }
/* La causa real de que las imágenes no salieran 1:1: cada tarjeta
   tenía un ANCHO calculado dividiendo el espacio disponible entre las
   columnas, pero un ALTO fijo (100% del alto del carrusel) — dos
   valores casi nunca iguales, así que la tarjeta no era un cuadrado.
   Encima, ponerle aspect-ratio:1/1 A LA IMAGEN dentro de una tarjeta
   ya no-cuadrada no sirve de nada: si el ancho Y el alto de un
   elemento ya están definidos (como acá, ambos en 100%), aspect-ratio
   no tiene ningún efecto — por eso la imagen terminaba con la forma de
   la tarjeta, no 1:1. La solución real: hacer que la tarjeta MISMA sea
   un cuadrado perfecto (ancho = alto = "Alto del carrusel"), y que el
   ancho visible del carrusel muestre exactamente la cantidad de
   "Columnas visibles" configurada — así ambos ajustes (alto en px y
   columnas visibles) se respetan a la vez, sin contradecirse. */
.frognum-galeria-carousel-track{
	display:flex; gap:var(--frognum-gal-gap,10px); overflow-x:auto; scroll-behavior:smooth;
	height:var(--frognum-gal-height,300px);
	max-width:calc(var(--frognum-gal-cols,3) * var(--frognum-gal-height,300px) + (var(--frognum-gal-cols,3) - 1) * var(--frognum-gal-gap,10px));
	flex:0 1 auto; min-width:0; scrollbar-width:none; -ms-overflow-style:none;
}
.frognum-galeria-carousel-track::-webkit-scrollbar{ display:none; }
.frognum-galeria-carousel-track .frognum-galeria-item{
	flex:0 0 var(--frognum-gal-height,300px);
	width:var(--frognum-gal-height,300px); height:var(--frognum-gal-height,300px);
	border-radius:var(--radius); overflow:hidden; cursor:pointer; display:block;
}
.frognum-galeria-carousel-track .frognum-galeria-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.frognum-galeria-nav{
	flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
	background:rgba(0,0,0,0.5); color:#fff; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center;
	z-index:2; transition:background .15s ease;
}
.frognum-galeria-nav:hover{ background:rgba(0,0,0,0.75); }