/*
Theme Name: Gaua Theme
Theme URI: https://gaua.example
Author: Gaua Project
Author URI: https://gaua.example
Description: Tema custom minimal, tecnofuturista y botánico — diseñado para perfumería, etnobotánica y experiencias olfativas.
Version: 1.0.0
Text Domain: gaua-theme
Tags: custom, accessibility, responsive, feature-rich
Requires PHP: 7.4
*/

:root{
  /* Paleta: turquesa óxido + negro mate + cobre */
  --bg: #0b0b0b;
  --panel: #0f1113;
  --accent: #00b2a9;          /* turquesa */
  --accent-2: #2aa89b;        /* variante */
  --copper: #b86b3a;
  --muted: #9aa0a6;
  --glass: rgba(255,255,255,0.04);
  --radius: 16px;
  --max-width: 1200px;
  --text: #e9ecef;
  --accent-glow: 0 6px 30px rgba(0,178,169,0.09);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
}

/* Basic reset & layout */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,var(--bg),#060606 60%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* Containers */
.site { max-width:var(--max-width); margin:0 auto; padding:48px 20px; }
.header-inner, .footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }

/* Header */
.site-header{ position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(15,15,15,0.65), rgba(15,15,15,0.25)); backdrop-filter: blur(6px); padding:18px 0; border-bottom:1px solid rgba(255,255,255,0.03); }
.brand{ display:flex; gap:14px; align-items:center; text-decoration:none; color:inherit; }
.brand svg{ width:46px; height:46px; }
.brand h1{ font-size:1.05rem; margin:0; letter-spacing:0.06em; }

/* Hero */
.hero{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:32px;
  align-items:stretch;
  margin:40px 0 64px;
}
.hero .hero-panel{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--accent-glow);
  border:1px solid rgba(255,255,255,0.03);
}
.hero h2{ font-size:2rem; margin:0 0 10px; letter-spacing: -0.02em; }
.hero p.lead{ color:var(--muted); margin:0 0 18px; }

/* Card styles for collections (perfume cards, botanics) */
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border-radius:12px;
  padding:18px;
  border:1px solid rgba(255,255,255,0.03);
  transition: transform .36s cubic-bezier(.2,.9,.3,1), box-shadow .36s;
  will-change: transform;
}
.card:hover{ transform: translateY(-8px) scale(1.01); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.card .tag{ font-family: var(--mono); font-size:0.7rem; padding:6px 10px; border-radius:999px; background:var(--glass); color:var(--muted); display:inline-block; }

/* Typographic microstyles */
.kv{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:.88rem; }
.small{ font-size:.85rem; color:var(--muted); }

/* Buttons */
.btn{
  display:inline-flex; gap:10px; align-items:center; padding:10px 16px; border-radius:999px;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#021212; font-weight:600; text-decoration:none; border:none; cursor:pointer;
  box-shadow: var(--accent-glow);
}

/* Footer */
.site-footer{ margin-top:80px; padding:28px 0 40px; border-top:1px solid rgba(255,255,255,0.03); color:var(--muted); }

/* Responsive tweaks */
@media (max-width:900px){
  .hero{ grid-template-columns: 1fr; }
  .site{ padding:28px 16px; }
}