:root{
  --bg:#0b0e0c;              
  --surface:#121815;          
  --card:#141d18;
  --accent:#1f4f3a;           
  --accent-2:#2b6b50;
  --gold:#c9c2a6;            
  --muted:#9aa39b;
  --text:#e9eee9;
  --text-dim:#cfd6d0;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text); background:radial-gradient(1000px 600px at 20% -20%, #15332533, transparent),
                     radial-gradient(900px 600px at 100% 0%, #3b2a1033, transparent),
                     var(--bg);
  line-height:1.6;
}

img{max-width:100%;display:block}

.container{width:min(1200px, 92%);margin:0 auto}

/* Nav */
.navbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--surface) 88%, black 12%);
  backdrop-filter: blur(8px);
  border-bottom:1px solid #1c241f;
}
.navbar .wrap{display:flex;align-items:center;gap:22px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:34px}
.brand span{font-family:"Playfair Display", serif;font-size:20px;color:var(--gold);letter-spacing:.8px}

.nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.nav a{
  color:var(--text); text-decoration:none; padding:10px 14px;
  border-radius:999px; border:1px solid transparent;
}
.nav a:hover{background:#0f1613;border-color:#1e2b24}
.nav a.active{border-color:#2e3b33;color:var(--gold)}

/* Hero */
.hero{
  min-height:64vh; display:grid; place-items:center; position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, #000000a8 0%, #0b0e0c 80%),
    var(--hero-image, url('img/hero.jpg')) center/cover no-repeat;
  border-bottom:1px solid #1e2722;
}
.hero .inner{ text-align:center; padding:80px 0 }
.hero h1{
  font-family:"Playfair Display", serif; font-weight:700; font-size:clamp(34px, 5vw, 56px);
  margin:0 0 10px; color:var(--gold);
}
.hero p{ color:var(--text-dim); margin:0 0 24px;font-size:clamp(16px,2.2vw,18px)}
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; text-decoration:none; border:1px solid #244c3a; box-shadow:var(--shadow)
}
.btn.secondary{ background:#0f1613; border-color:#1f2a24; color:var(--gold) }
.btn:hover{ transform:translateY(-1px) }

/* Sections */
.section{ padding:48px 0 }
.section h2{
  font-family:"Playfair Display", serif; color:var(--gold); margin:0 0 18px; font-size:28px
}
.lead{ color:var(--text-dim); max-width:65ch }

/* Cards (listado en boxes) */
.grid{
  display:grid; gap:22px;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}
.card{
  background:linear-gradient(180deg, #121a16 0%, #0f1713 100%);
  border:1px solid #1c241f; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow);
}
.card .media{aspect-ratio: 16/10; background:#0e1311}
.card .body{padding:16px}
.tag{
  display:inline-block; font-size:12px; color:#b6c0b9; border:1px solid #263229;
  padding:4px 8px; border-radius:999px; margin-bottom:10px
}
.title{font-weight:600; margin:6px 0 4px}
.price{color:var(--gold); font-weight:600; margin:0 0 10px}
.card .actions{display:flex; gap:10px; margin-top:4px}
.link{ color:#d7d1b6; text-decoration:none }
.link:hover{ text-decoration:underline }

/* Tabla (listado tabla) */
.table-wrap{overflow:auto;border:1px solid #1c241f;border-radius:14px}
table{ width:100%; border-collapse:collapse; background:var(--card) }
th, td{ padding:14px 12px; border-bottom:1px solid #1c241f; text-align:left }
th{ position:sticky; top:0; background:#0f1613; color:var(--gold); font-weight:600 }
tbody tr:hover{ background:#101814 }
.badge{ padding:6px 10px; border-radius:999px; border:1px solid #2b3c33; color:#cfd6d0 }

/* Ficha producto */
.product{
  display:grid; gap:28px; grid-template-columns: 1.2fr .8fr;
}
.product .gallery{ background:#0f1613; border:1px solid #1c241f; border-radius:16px; padding:12px }
.product .meta{ background:#101713; border:1px solid #1c241f; border-radius:16px; padding:18px }
.specs{margin-top:14px;border-top:1px dashed #243028;padding-top:10px;color:#cbd3cc}
.specs li{margin:6px 0}

/* form comprar */
.form{
  display:grid; gap:16px; grid-template-columns: repeat(12, 1fr);
  background:#101713;border:1px solid #1c241f;border-radius:16px;padding:18px;
}
.form .field{ grid-column: span 6; display:flex; flex-direction:column; gap:6px }
.form .field.full{ grid-column: 1 / -1 }
label{ color:#d7e0d8; font-weight:600 }
input, select, textarea{
  background:#0e1512; color:var(--text); border:1px solid #1f2a24; border-radius:10px;
  padding:12px; outline:none
}
input:focus, select:focus, textarea:focus{ border-color:#2d4f40 }
.help{ color:#9fb1a7; font-size:13px }
.total{ font-size:18px; color:var(--gold); font-weight:700 }
hr.sep{ border:0; border-top:1px solid #1c241f; margin:6px 0 10px }

/* footer */
.footer{border-top:1px solid #1c241f;background:#0f1613;color:#aab4ac}
.footer .wrap{padding:24px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer small{color:#8f9a92}

/* responsivo */
@media (max-width: 900px){
  .product{ grid-template-columns: 1fr }
  .form .field{ grid-column: span 12 }
}

/* Intro */
#splash{
  position: fixed;
  inset: 0;                 /* top/right/bottom/left = 0 */
  z-index: 99999;           
  display: grid;
  place-items: center;
  background: #0b0e0c;      
  transition: opacity .6s ease, visibility .6s;
}
#splash.hidden{ opacity: 0; visibility: hidden; }

.splash-inner{
  display: grid; place-items: center; gap: 14px;
  transform: scale(.92);
  animation: splash-enter 1.1s ease-out forwards;
}
.splash-logo{
  width: min(320px, 60vw);
  filter: blur(4px) brightness(.7);
  opacity: 0;
  animation:
    logo-focus .9s ease-out .15s forwards,
    logo-sheen 1.8s ease-out .25s forwards;
}
.glow{
  width: 60%; height: 2px;
  background: radial-gradient(circle, #c9c2a6 60%, transparent 70%);
  opacity: 0; transform: scaleX(.6);
  animation: glow-reveal 1s ease-out .6s forwards;
}

/* animaciones */
@keyframes splash-enter{ to{ transform: scale(1); } }
@keyframes logo-focus{ to{ filter: blur(0) brightness(1); opacity: 1; } }
@keyframes logo-sheen{
  0%{
    -webkit-mask: linear-gradient(100deg,#000 46%,#fff 50%,#000 54%) -200% 0/250% 100% no-repeat;
    mask:         linear-gradient(100deg,#000 46%,#fff 50%,#000 54%) -200% 0/250% 100% no-repeat;
  }
  100%{
    -webkit-mask: linear-gradient(100deg,#000 46%,#fff 50%,#000 54%) 200% 0/250% 100% no-repeat;
    mask:         linear-gradient(100deg,#000 46%,#fff 50%,#000 54%) 200% 0/250% 100% no-repeat;
  }
}
@keyframes glow-reveal{ to{ opacity:.6; transform: scaleX(1);} }

@media (prefers-reduced-motion: reduce){
  .splash-inner, .splash-logo, .glow{ animation: none !important; }
  #splash{ transition: none; }
}

/* menu movil */
.nav-toggle{ display:none; background:#0f1613; color:var(--gold); border:1px solid #233027;
  padding:8px 12px; border-radius:10px; }
@media (max-width:880px){
  .nav-toggle{ display:block; margin-left:auto; }
  .nav{ display:none; width:100%; flex-direction:column; gap:8px; padding-top:10px; }
  .nav.is-open{ display:flex; }
  .nav a{ text-align:center; }
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(14px); transition:.5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* Toast exito */
.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:#0f1613; color:var(--gold); border:1px solid #2a3a31; padding:10px 14px;
  border-radius:10px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.3s; }
.toast.show{ opacity:1; }

/* boton volver arriba */
#backtop{ display:none; position:fixed; right:16px; bottom:16px; border:1px solid #233027;
  background:#0f1613; color:var(--gold); padding:10px 12px; border-radius:12px; }

.nav-toggle {
  display: none;
  background: #0f1613;
  color: var(--gold);
  border: 1px solid #233027;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 20px;
}

@media (max-width: 880px) {
  .nav-toggle {
    display: block;
    margin-left: auto;
  }

  .nav {
    display: none;
    flex-direction: column;
    gap: 10px;
    background: #0f1613;
    border-top: 1px solid #1c241f;
    width: 100%;
    text-align: center;
    padding: 10px 0;
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    padding: 10px;
  }
}

/* saca texto de marca al lado del logo  */
.navbar .brand span { display:none !important; }

/* burger / nav movil  */
@media (max-width: 880px){
  header .nav { display:none; flex-direction:column; gap:10px; background:#0f1613; border-top:1px solid #1c241f; width:100%; text-align:center; padding:10px 0; }
  header .nav.is-open { display:flex; }
  .nav-toggle, .burger { z-index:1000; }
}

/*  “Volver arriba” móvil */
.nav a.nav-backtotop { opacity:.85; }
.nav a.nav-backtotop:hover { opacity:1; }

/* burger / Nav movil */
@media (max-width: 880px){
  header .nav{
    position: fixed;
    top: 64px; left: 0; right: 0;
    display: none;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem 1rem 1rem;
    background: rgba(11,11,13,.97);
    border-top: 1px solid var(--line);
    z-index: 999;
    text-align: center;
  }
  header .nav.is-open{ display:flex; }
  .nav-toggle, .burger{ z-index:1000; }
}

/* ocultar cualquier texto junto al logo */
.navbar .brand span,
.navbar .brand .brand-text,
.navbar .brand .logo-text,
.navbar .brand .site-name{ display:none !important; }

/* ocultar el texto de marca del footer en todas las paginas */
.footer .wrap strong,
.footer .wrap .brand-text,
.footer .wrap .logo-text,
.footer .wrap > div > strong { 
  display: none !important; 
}

/* Burguer / Nav */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.icon-bars {
  display: block;
}

/*  nav oculto en movil */
.nav {
  display: none;
}

/* cuando esta abierto */
.nav.is-open {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  padding: 1rem var(--container-padding, 16px);
  background: var(--bg-light, #f8f9fa);
  border-top: 1px solid var(--border-color, #dee2e6);
  z-index: 50;
}

/* no-scroll del body cuando el menu móvil está abierto */
.body-no-scroll {
  overflow: hidden;
}

/* en desktop el nav siempre visible y horizontal */
@media (min-width: 992px) {
  .nav { 
    display: flex;
    position: static;
    gap: 1rem;
    flex-direction: row;
  }
  .nav.is-open { 
    display: flex; 
  }
}



/* en desktop (≥ 881px) ocultar SIEMPRE el burguer */
@media (min-width: 881px){
  .nav-toggle{
    display: none !important;
  }
}

/* en móvil (≤ 880px) mostrar el burguer */
@media (max-width: 880px){
  .nav-toggle{
    display: inline-flex !important;  /* prioriza sobre reglas previas */
    align-items: center;
    justify-content: center;
  }
}

/* el burguer solo en móvil */
@media (min-width: 881px){
  .nav-toggle{ display:none !important; }
}
@media (max-width: 880px){
  .nav-toggle{
    display:inline-flex !important;
    align-items:center; justify-content:center;
  }
}