/*
Theme Name: Calixto Negrón Tienda
Theme URI: https://calixtonegron.com
Author: Calixto Negrón
Author URI: https://calixtonegron.com
Description: Tema personalizado para la tienda de descargas de música de Calixto Negrón, hecho a juego con el sitio principal (calixtonegron.com) — mismo fondo oscuro, misma tipografía y mismos colores.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: calixto-tienda
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:            #12100e;
  --bg-elevated:   #1c1712;
  --bg-elevated-2: #241d16;
  --gold:          #b08d57;
  --gold-bright:   #d9b878;
  --wine:          #5c1a1f;
  --text:          #ede6d6;
  --text-muted:    #a69c87;
  --line:          rgba(176,141,87,0.28);
  --line-soft:     rgba(176,141,87,0.14);

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Newsreader', serif;
  --font-mono:    'JetBrains Mono', monospace;

  --maxw: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }

:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; }

h1,h2,h3,h4{ font-family: var(--font-display); font-weight:500; margin:0 0 0.5em; color: var(--text); }
h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); line-height:1.1; }
h2{ font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3{ font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
p{ margin:0 0 1.2em; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display:inline-block;
  margin-bottom: 0.9em;
}

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 6vw; }
.section{ padding: 4rem 0; }

.divider{ border:0; border-top: 1px solid var(--line); margin: 3.5rem 0; }

/* ---------- Header / navegación ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(18,16,14,0.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem 6vw;
  max-width: var(--maxw); margin:0 auto;
}
.brand{ font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.03em; color: var(--text); }
.brand span{ color: var(--gold); }

.nav-links{ display:flex; gap: 2.2rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  position: relative;
  padding-bottom: 4px;
}
.nav-links a:hover, .nav-links .current-menu-item a{ color: var(--gold-bright); }
.nav-links .current-menu-item a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--gold);
}

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line); color: var(--text);
  padding: 0.5rem 0.8rem; font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.1em;
  cursor:pointer;
}

@media (max-width: 780px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--line-soft);
    max-height:0; overflow:hidden;
    transition: max-height 0.3s ease;
  }
  .nav-links.open{ max-height: 320px; }
  .nav-links li{ border-top:1px solid var(--line-soft); }
  .nav-links a{ display:block; padding: 1rem 6vw; }
  .nav-toggle{ display:inline-block; }
}

/* ---------- Botones (compatibles con la mayoría de plugins de tienda) ---------- */
.btn, a.button, button.button, input[type="submit"], button[type="submit"],
.wp-block-button__link, .download-button, .buy-now, .add-to-cart{
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 1.5rem !important;
  border: 1px solid var(--gold) !important;
  background: var(--gold) !important;
  color: var(--bg) !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  display:inline-block;
}
.btn:hover, a.button:hover, button.button:hover, input[type="submit"]:hover{
  background: var(--gold-bright) !important;
  border-color: var(--gold-bright) !important;
  color: var(--bg) !important;
}

/* ---------- Tarjetas / cuadrícula genérica (productos) ---------- */
.card, .product, .store-item{
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  padding: 1.8rem;
}
.grid, .products, .store-grid{
  display:flex; flex-wrap:wrap; gap: 1.6rem; justify-content:center;
}
.grid > *, .products > *, .store-grid > *{ flex: 1 1 260px; max-width: 320px; }

/* ---------- Formularios / inputs (checkout, filtros, etc.) ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select{
  width:100%;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7rem 1rem;
}
label{ display:block; font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--text-muted); margin-bottom: 0.4rem; }

table{ width:100%; border-collapse: collapse; }
table th, table td{ border-bottom: 1px solid var(--line-soft); padding: 0.7rem; text-align:left; }
table th{ font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--gold); }

/* Precios (clases comunes en plugins de descargas) */
.price, .product-price, .amount{ color: var(--gold-bright); font-family: var(--font-mono); }

/* ---------- Contenido general (the_content) ---------- */
.theme-content{ margin-top: 1.5rem; }
.theme-content a{ color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.theme-content ul, .theme-content ol{ padding-left: 1.4rem; }

/* ---------- Footer ---------- */
.site-footer{ border-top: 1px solid var(--line-soft); margin-top: 5rem; padding: 2.5rem 0; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-note{ font-family: var(--font-mono); font-size:0.7rem; color: var(--text-muted); letter-spacing:0.05em; }
.footer-note a{ color: var(--gold); }