/* ============================================================
   EL OASIS DEL COCHE — SHARED STYLES
   Diseñado por lobasite.com | SEO Vilaseca, Tarragona, Salou
   ============================================================ */

:root {
  --gold: #d4a574;
  --gold-light: #e8d5c4;
  --gold-dark: #b8864a;
  --black: #080808;
  --dark: #111111;
  --dark2: #1a1a1a;
  --dark3: #222222;
  --white: #ffffff;
  --text-muted: rgba(255,255,255,0.72);
  --text-soft: rgba(255,255,255,0.85);
  --radius: 10px;
  --shadow-gold: 0 20px 60px rgba(212,165,116,0.3);
  --transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:85px; }
body {
  font-family: 'Montserrat', sans-serif;
  background: var(--black);
  color: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--black); }
::-webkit-scrollbar-thumb { background:var(--gold-dark); border-radius:3px; }

/* ── HEADER ── */
header {
  position: fixed; top:0; width:100%;
  background: rgba(8,8,8,0.97);
  border-bottom: 2px solid var(--gold);
  z-index: 1000;
  padding: 0 3rem;
  height: 80px;
  display: flex; justify-content:space-between; align-items:center;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0,0,0,0.6);
}

.logo-header { display:flex; align-items:center; gap:1rem; text-decoration:none; }
.logo-3d-diamond {
  width: 52px; height: 52px;
  position: relative;
  transform-style: preserve-3d;
  animation: diamondSpin 8s linear infinite;
  cursor: pointer;
}
.logo-3d-diamond .face {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 6px;
  overflow: hidden;
  backface-visibility: hidden;
  border: 1px solid rgba(212,165,116,0.5);
  background: #080808;
}
.logo-3d-diamond .face img { width:100%; height:100%; object-fit:contain; padding:3px; }
.face-front  { transform: translateZ(26px); }
.face-back   { transform: rotateY(180deg) translateZ(26px); }
.face-left   { transform: rotateY(-90deg) translateZ(26px); }
.face-right  { transform: rotateY(90deg) translateZ(26px); }
.face-top    { transform: rotateX(90deg) translateZ(26px); }
.face-bottom { transform: rotateX(-90deg) translateZ(26px); }
@keyframes diamondSpin {
  0%   { transform: rotateY(0deg) rotateX(15deg); }
  100% { transform: rotateY(360deg) rotateX(15deg); }
}

.logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem; font-weight: 900;
  color: var(--gold); letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(212,165,116,0.4);
}

nav { display:flex; gap:2.5rem; }
nav a {
  color: rgba(255,255,255,0.85);
  text-decoration:none; font-weight:600; font-size:0.82rem;
  letter-spacing:1.5px; text-transform:uppercase;
  padding-bottom:4px;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}
nav a:hover, nav a.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.header-right { display:flex; gap:1rem; align-items:center; }
.phone-badge {
  display:flex; align-items:center; gap:0.5rem;
  color: var(--gold); font-weight:700; font-size:0.9rem;
}
.btn-call {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--black); padding:0.75rem 1.8rem;
  border:none; border-radius:6px; font-weight:800;
  cursor:pointer; text-transform:uppercase; letter-spacing:1.5px;
  font-size:0.78rem; transition:var(--transition);
  font-family:'Montserrat',sans-serif;
}
.btn-call:hover { transform:translateY(-2px); box-shadow: 0 8px 25px rgba(212,165,116,0.45); }

/* ── BUTTONS ── */
.btn {
  display:inline-block; padding:1.1rem 2.8rem;
  font-size:0.88rem; font-weight:800;
  border-radius:6px; cursor:pointer;
  text-transform:uppercase; letter-spacing:2px;
  transition:var(--transition); text-decoration:none;
  border: 2px solid var(--gold);
  font-family:'Montserrat',sans-serif;
}
.btn-primary { background:var(--gold); color:var(--black); }
.btn-primary:hover { background:var(--gold-light); transform:translateY(-3px); box-shadow: var(--shadow-gold); }
.btn-secondary { background:transparent; color:var(--gold); }
.btn-secondary:hover { background:var(--gold); color:var(--black); transform:translateY(-3px); }

/* ── SECTIONS ── */
section { padding:6rem 3rem; }
.section-title {
  font-family:'Playfair Display',serif;
  font-size:3.5rem; text-align:center;
  color:var(--gold); margin-bottom:4rem;
  letter-spacing:-1px;
}
.section-title span { color:var(--white); }

/* ── FOOTER ── */
footer {
  background: linear-gradient(180deg, var(--dark2) 0%, var(--black) 100%);
  border-top: 2px solid var(--gold);
  padding: 5rem 3rem 2rem;
}
.footer-grid {
  display:grid; grid-template-columns: repeat(4,1fr);
  gap:2.5rem; max-width:1400px; margin:0 auto 3rem;
}
.footer-col h3 { color:var(--gold); margin-bottom:1.2rem; font-size:0.9rem; letter-spacing:2px; text-transform:uppercase; }
.footer-col p, .footer-col a {
  color:rgba(255,255,255,0.65); font-size:0.9rem; line-height:2;
  text-decoration:none; display:block; transition:color 0.3s;
}
.footer-col a:hover { color:var(--gold); }
.footer-bottom {
  text-align:center; padding-top:2.5rem;
  border-top:1px solid rgba(212,165,116,0.2);
  color:rgba(255,255,255,0.45); font-size:0.82rem; line-height:2;
}
.footer-bottom a { color:var(--gold); text-decoration:none; }

/* ── HAMBURGER ── */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span { width:26px; height:2px; background:var(--gold); border-radius:2px; transition:var(--transition); }
.mobile-nav {
  display:none; position:fixed;
  top:80px; left:0; right:0;
  background:rgba(8,8,8,0.98);
  border-bottom:2px solid var(--gold);
  padding:2rem 3rem; z-index:999;
  flex-direction:column; gap:1.5rem;
  backdrop-filter:blur(12px);
}
.mobile-nav a {
  color:var(--white); text-decoration:none; font-weight:600;
  font-size:1rem; letter-spacing:2px; text-transform:uppercase;
  padding:0.5rem 0; border-bottom:1px solid rgba(212,165,116,0.15);
  transition:color 0.3s;
}
.mobile-nav a:hover { color:var(--gold); }
.mobile-nav.open { display:flex; }

@media (max-width:1024px) {
  .footer-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  header { padding:0 1.5rem; }
  nav { display:none; }
  .hamburger { display:flex; }
  .phone-badge { display:none; }
  .btn-call { padding:0.65rem 1.2rem; font-size:0.72rem; }
  section { padding:4rem 1.5rem; }
  .section-title { font-size:2.4rem; }
  .footer-grid { grid-template-columns:1fr; }
}