/*
Theme Name:  RetroJoal
Theme URI:   https://retrojoal.com
Author:      RetroJoal
Author URI:  https://retrojoal.com
Description: Tema oscuro para RetroJoal.com — Hub del coleccionista JOAL. Diseño dark & gold con tipografía Barlow Condensed + DM Sans. Compatible con WordPress 6.x y PHP 8.x.
Version:     1.0.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: retrojoal
Tags:        dark, one-page, custom-menu, featured-images, footer-widgets, full-width-template
*/

/* =====================================================
   NOTA: Este archivo solo contiene la cabecera del tema
   requerida por WordPress y los estilos críticos
   de reset/base. El CSS completo se carga desde
   assets/css/retrojoal.css vía functions.php
   ===================================================== */

/* ── Reset mínimo de seguridad ─────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body { overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }

/* ── Fix global: el tema sobreescribe enlaces ────────── */
a,
a:hover,
a:visited,
a:focus { text-decoration: none !important; color: inherit; }

/* ── Botones: color de texto fijo, sin herencia del tema ── */
.rj-btn                { text-decoration: none !important; }
.rj-btn--gold          { color: #0D0C0A !important; }
.rj-btn--gold:hover    { color: #0D0C0A !important; }
.rj-btn--wa            { color: #ffffff !important; }
.rj-btn--wa:hover      { color: #ffffff !important; }
.rj-btn--border        { color: #7A6E64 !important; }
.rj-btn--border:hover  { color: #F5B800 !important; }
.rj-btn--ghost         { color: #E8E0D0 !important; }
.rj-btn--ghost:hover   { color: #F5B800 !important; }

/* ── Nav: sin subrayado ──────────────────────────────── */
.rj-nav a,
.rj-nav a:hover,
.footer-links a,
.footer-links a:hover,
.mob-item,
.rj-sec-link,
.hub-action,
.bc-read,
.gc-footer a,
.prod-footer a { text-decoration: none !important; }

/* ── Fix imágenes en contenedores con aspect-ratio ── */
.bc-img-wrap img,
.gc-img-wrap img,
.lamp-img,
.prod-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.b-feat .bc-img-wrap,
.b-med  .bc-img-wrap,
.b-sm   .bc-img-wrap { aspect-ratio: 2/1 !important; height: unset !important; }

.gc-img-wrap  { aspect-ratio: 4/3 !important; height: unset !important; }
.lamp-viewer  { aspect-ratio: 4/3 !important; height: unset !important; }
.prod-slides[data-ratio="4-3"] { aspect-ratio: 4/3 !important; height: unset !important; }
.prod-slides[data-ratio="2-1"] { aspect-ratio: 2/1 !important; height: unset !important; }

/* ── Body: sin padding-top — cada página gestiona su offset ── */
body,
body.page,
body.home,
body.front-page,
body.single { padding-top: 0 !important; margin-top: 0 !important; }

/* ── Wrappers globales de WordPress ────────────────────────── */
#page,
#content,
.site-content,
.site { padding-top: 0 !important; margin-top: 0 !important; }

/* ── Hero: arranca en y=0, el header fixed lo cubre ─────────── */
#hero { margin-top: 0 !important; padding-top: 0 !important; }

/* ── Plantilla de página/post (rj-section--single) ─────────── */
/* Anula el padding del wrapper del tema en páginas con layout
   propio (guía vitrina, productos, landing, etc.)            */
.rj-section--single {
  padding: 0 !important;
  margin: 0 !important;
}
.rj-single-inner {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Breadcrumb automático del tema: oculto en páginas
   que ya llevan su propio header o navegación interna */
.rj-section--single .entry-header { display: none !important; }

/* entry-content sin margen ni padding añadido */
.entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.entry-content > * { margin-block: 0 !important; }
.wp-site-blocks     { padding: 0 !important; }

/* ── Footer / colophon del tema ─────────────────────────────── */
#colophon,
.site-footer { margin: 0 !important; padding: 0 !important; }

/* ── Admin bar cuando estás logueado ────────────────────────── */
/* Desktop: admin bar visible (32px) → bajamos el header */
html.admin-bar #rj-header { top: 32px !important; }
/* Móvil: el tema oculta la admin bar en el frontend,
   la clase html.admin-bar sigue presente pero no hay barra física,
   así que forzamos top:0 para que el header quede pegado al navegador */
@media screen and (max-width: 782px) {
  html.admin-bar #rj-header { top: 0 !important; }
}

/* ══════════════════════════════════════════════════════
   PÁGINA PRODUCTOS — /productos/
   ══════════════════════════════════════════════════════ */

/* ── Page hero ────────────────────────────────────────── */
.page-hero {
  padding: calc(var(--nav-h, 64px) + 52px) 40px 52px;
  border-bottom: 1px solid var(--gold-b, rgba(245,184,0,.14));
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; top: -120px; right: -120px;
  width: 600px; height: 600px;
  background: radial-gradient(ellipse, rgba(245,184,0,.05) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.page-hero-inner { max-width: 1200px; margin: 0 auto; }
.breadcrumb {
  font-family: var(--fm, monospace); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted, #7A6E64);
  display: flex; align-items: center; gap: 8px; margin-bottom: 24px;
}
.breadcrumb a { color: var(--muted, #7A6E64); transition: color .2s; }
.breadcrumb a:hover { color: var(--gold, #F5B800); }
.breadcrumb span { color: var(--dim, #4A433B); }
.page-hero h1 {
  font-family: var(--ft, sans-serif); font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 900; letter-spacing: .01em; text-transform: uppercase;
  color: var(--light, #E8E0D0); line-height: .95; margin-bottom: 16px;
}
.page-hero h1 em { font-style: normal; color: var(--gold, #F5B800); }
.page-hero p {
  font-size: .9rem; color: var(--muted, #7A6E64); line-height: 1.7;
  max-width: 520px; border-left: 2px solid var(--gold, #F5B800); padding-left: 16px;
}

/* ── Product grid ─────────────────────────────────────── */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}

/* ── Product card ─────────────────────────────────────── */
.prod-card {
  background: var(--ink2, #1A1714);
  border: 1px solid var(--gold-b, rgba(245,184,0,.14));
  border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s, transform .4s cubic-bezier(.25,.46,.45,.94);
}
.prod-card:hover {
  border-color: rgba(245,184,0,.35);
  transform: translateY(-4px);
  box-shadow: 0 8px 40px rgba(0,0,0,.55);
}

/* ── Slideshow ────────────────────────────────────────── */
.prod-slides { position: relative; overflow: hidden; background: var(--ink3, #252220); }
.prod-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .45s ease;
  display: flex; align-items: center; justify-content: center;
}
.prod-slide.active { opacity: 1; }
.prod-slide-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; opacity: .2;
}
.prod-slide-placeholder span:first-child { font-size: 3rem; line-height: 1; }
.prod-slide-placeholder span:last-child {
  font-size: .55rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted, #7A6E64);
}
.prod-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 2;
}
.prod-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(232,224,208,.3); border: none; cursor: pointer;
  padding: 0; transition: background .2s, transform .2s;
}
.prod-dot.active { background: var(--gold, #F5B800); transform: scale(1.3); }
.prod-dots:has(.prod-dot:only-child) { display: none; }
.prod-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(13,12,10,.7); border: 1px solid var(--gold-b, rgba(245,184,0,.14));
  color: var(--light, #E8E0D0); width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; transition: background .2s, border-color .2s;
  font-size: .8rem; line-height: 1;
}
.prod-arrow:hover { background: rgba(245,184,0,.2); border-color: var(--gold, #F5B800); }
.prod-arrow--prev { left: 10px; }
.prod-arrow--next { right: 10px; }
.prod-slides:not(:has(.prod-slide:nth-child(2))) .prod-arrow { display: none; }

/* ── Badge ────────────────────────────────────────────── */
.prod-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-size: .52rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(13,12,10,.85); border: 1px solid var(--gold-b, rgba(245,184,0,.14));
  color: var(--gold, #F5B800);
}
.prod-badge--new { background: rgba(245,184,0,.2); border-color: var(--gold, #F5B800); }

/* ── Card body ────────────────────────────────────────── */
.prod-body { padding: 24px 24px 0; flex: 1; display: flex; flex-direction: column; }
.prod-cat {
  font-size: .55rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold, #F5B800); margin-bottom: 8px; display: block;
}
h3.prod-title {
  font-family: var(--ft, sans-serif); font-size: 1.5rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--light, #E8E0D0); line-height: 1.05; margin-bottom: 10px;
}
.prod-desc {
  font-size: .83rem; color: var(--muted, #7A6E64);
  line-height: 1.7; margin-bottom: 20px; flex: 1;
}
.prod-specs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.prod-spec {
  font-size: .55rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--ink3, #252220); border: 1px solid rgba(255,255,255,.07);
  color: var(--muted, #7A6E64);
}
.prod-footer {
  padding: 16px 24px; border-top: 1px solid var(--gold-b, rgba(245,184,0,.14));
  background: rgba(245,184,0,.025);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.prod-price-label {
  font-size: .55rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted, #7A6E64); display: block; margin-bottom: 2px;
}
.prod-price {
  font-family: var(--ft, sans-serif); font-size: 1.1rem; font-weight: 700;
  color: var(--gold, #F5B800); letter-spacing: .04em;
}

/* ── Lamp toggle ──────────────────────────────────────── */
.lamp-viewer {
  overflow: hidden; background: var(--ink3, #252220);
  position: relative !important;
}
.lamp-img {
  position: absolute !important; inset: 0 !important; z-index: 1 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center top !important;
  display: block !important; margin: 0 !important;
  opacity: 1 !important;
}
.lamp-glow {
  position: absolute !important; inset: 0 !important; z-index: 2 !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(255,180,40,.18) 0%, transparent 70%);
  transition: opacity .6s ease; opacity: 1;
}
.lamp-viewer.off .lamp-glow { opacity: 0; }
.lamp-switch-wrap {
  position: absolute; bottom: 14px; right: 14px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  background: rgba(13,12,10,.75); backdrop-filter: blur(8px);
  border: 1px solid var(--gold-b, rgba(245,184,0,.14)); border-radius: 999px;
  padding: 7px 14px 7px 16px;
}
.lamp-switch-label {
  font-size: .55rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--light, #E8E0D0); white-space: nowrap; transition: color .3s;
}
.lamp-viewer.off .lamp-switch-label { color: var(--muted, #7A6E64); }
.lamp-switch {
  position: relative; width: 40px; height: 22px; border-radius: 999px;
  border: none; cursor: pointer; padding: 0; flex-shrink: 0;
  background: var(--gold, #F5B800); transition: background .35s ease;
}
.lamp-switch:not(.on) { background: var(--dim, #4A433B); }
.lamp-switch-knob {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink, #0D0C0A);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.lamp-switch.on .lamp-switch-knob { transform: translateX(18px); }

/* ── Responsive productos ─────────────────────────────── */
@media (max-width: 768px) {
  .page-hero { padding: calc(52px + 32px) 20px 36px; }
  .prod-grid { grid-template-columns: 1fr; }
}