/* ============================================
   TOKENS
   ============================================ */
:root{
  --obsidian: #0b0b0d;
  --charcoal: #17171a;
  --charcoal-2: #1f1f23;
  --gold: #C6A15B;
  --gold-soft: #8a7040;
  --gold-bright: #e4c988;
  --cream: #F3ECDD;
  --cream-dim: #cfc6b2;

  --serif: 'Playfair Display', 'Bodoni Moda', Georgia, serif;
  --sans: 'Montserrat', -apple-system, sans-serif;

  --radius: 2px;
  --border-hair: 1px solid rgba(198,161,91,0.35);
}

*{ box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  background: var(--obsidian);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

body{
  background-image:
    radial-gradient(circle at 15% 10%, rgba(198,161,91,0.05), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(198,161,91,0.04), transparent 40%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
  min-height: 100vh;
}

h1, h2, h3{
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.3em 0;
  color: var(--cream);
}

.eyebrow{
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.68rem;
  color: var(--gold);
  margin: 0 0 0.6em 0;
  font-weight: 500;
}

.muted{ color: var(--cream-dim); font-weight: 300; }
.small{ font-size: 0.8rem; }

button, input, select{
  font-family: var(--sans);
}

/* ============================================
   TOPBAR
   ============================================ */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11,11,13,0.92);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-hair);
}

.topbar__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand{ display:flex; align-items:center; height: 30px; }
.brand__logo{ height: 26px; width: auto; filter: drop-shadow(0 0 6px rgba(198,161,91,0.25)); }
.brand__fallback{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 1.3rem;
  color: var(--gold-bright);
}

.mainnav{ display:flex; gap: 6px; }

.mainnav__link{
  background: none;
  border: none;
  color: var(--cream-dim);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
  position: relative;
  transition: color 0.25s ease;
}

.mainnav__link::after{
  content:"";
  position: absolute;
  left: 16px; right: 16px; bottom: 4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.mainnav__link:hover{ color: var(--cream); }
.mainnav__link.is-active{ color: var(--gold-bright); }
.mainnav__link.is-active::after{ transform: scaleX(1); }

.mainnav__burger{
  display:none;
  flex-direction: column;
  gap: 5px;
  background:none;
  border:none;
  cursor:pointer;
  padding: 6px;
}
.mainnav__burger span{
  width: 22px; height: 1px; background: var(--gold);
}

/* ============================================
   LAYOUT / VIEWS
   ============================================ */
.app{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px 80px 28px;
}

.view{ display:none; animation: fadeIn 0.5s ease; }
.view.is-active{ display:block; }

@keyframes fadeIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

.view__header{ padding: 48px 0 28px 0; border-bottom: var(--border-hair); margin-bottom: 36px; }
.view__header h2{ font-size: 2rem; }

/* ============================================
   HERO (solo Inicio)
   ============================================ */
.hero{
  position: relative;
  margin: 0 -28px 20px -28px;
  padding: 46px 28px 10px 28px;
  overflow: hidden;
  border-bottom: var(--border-hair);
  background:
    linear-gradient(180deg, rgba(198,161,91,0.05), transparent 60%),
    linear-gradient(180deg, #0e0e10, #0b0b0d);
}

.hero__glow{
  position:absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 85% 70%, rgba(122,42,28,0.18), transparent 70%);
  pointer-events:none;
}

.hero__stage{
  position: relative;
  height: 220px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.hero__car{
  width: min(900px, 100%);
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.6));
  transform: translateX(0);
}

/* vibración sutil (ralentí / RPM altas) */
.hero__car.is-idling{
  animation: idleShake 0.14s infinite;
}
@keyframes idleShake{
  0%   { transform: translate(0px, 0px); }
  25%  { transform: translate(0.6px, -0.4px); }
  50%  { transform: translate(-0.5px, 0.3px); }
  75%  { transform: translate(0.4px, 0.4px); }
  100% { transform: translate(0px, 0px); }
}

/* luces traseras encendiéndose */
#tailLight{
  transition: fill 0.4s ease, filter 0.4s ease;
}
#tailLight.is-lit{
  fill: #ff3b2a;
  filter: drop-shadow(0 0 10px rgba(255,59,42,0.9)) drop-shadow(0 0 22px rgba(255,59,42,0.5));
}

/* launch: aceleración hacia la derecha */
.hero__car.is-launching{
  animation: launchOut 0.9s cubic-bezier(.55,.06,.9,.35) forwards;
}
@keyframes launchOut{
  0%   { transform: translateX(0); }
  100% { transform: translateX(180%); opacity: 0; }
}

.hero__car.is-resetting{
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform: translateX(-140%);
  opacity: 0;
}

.hero__trail{
  position:absolute;
  left: 8%;
  right: 46%;
  bottom: 48px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  opacity: 0;
  filter: blur(1px);
}
.hero__trail.is-active{
  animation: trailFade 0.9s ease forwards;
}
@keyframes trailFade{
  0%   { opacity: 0; }
  15%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ============================================
   PANEL GRID (Inicio)
   ============================================ */
.panel-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap: 22px;
  padding: 36px 0 10px 0;
}

.card{
  background: linear-gradient(160deg, var(--charcoal), var(--charcoal-2));
  border: var(--border-hair);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  position: relative;
}
.card::before{
  content:"";
  position:absolute;
  inset: 6px;
  border: 1px solid rgba(198,161,91,0.12);
  pointer-events:none;
}

.card--greeting h1{ font-size: 1.7rem; }

.next-call{ margin-top: 10px; }
.next-call__empty{ color: var(--cream-dim); font-style: italic; }
.next-call__item{
  display:flex; flex-direction:column; gap: 4px;
}
.next-call__time{ font-family: var(--serif); font-size: 1.6rem; color: var(--gold-bright); }
.next-call__contact{ font-size: 1rem; }
.next-call__subject{ color: var(--cream-dim); font-size: 0.85rem; }

.summary__count{
  font-family: var(--serif);
  font-size: 3rem;
  margin: 6px 0 0 0;
  color: var(--gold-bright);
}

/* ============================================
   AGENDA LIST
   ============================================ */
.agenda-day{ margin-bottom: 38px; }
.agenda-day__title{
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
  font-family: var(--sans);
  font-weight: 500;
  border-bottom: var(--border-hair);
  padding-bottom: 10px;
}

.agenda-list{ list-style:none; margin:0; padding:0; }

.agenda-list__item{
  display:grid;
  grid-template-columns: 90px 1fr auto;
  align-items:center;
  gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(198,161,91,0.14);
}

.agenda-list__time{ font-family: var(--serif); color: var(--gold-bright); font-size: 1.1rem; }
.agenda-list__contact{ font-weight: 500; }
.agenda-list__subject{ color: var(--cream-dim); font-size: 0.85rem; }

.agenda-list__delete{
  background:none;
  border: 1px solid rgba(198,161,91,0.3);
  color: var(--cream-dim);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.agenda-list__delete:hover{ border-color: var(--gold); color: var(--gold-bright); }

.agenda-list__empty{ color: var(--cream-dim); font-style: italic; padding: 14px 4px; }

/* ============================================
   FORMS
   ============================================ */
.booking-form, .config-card{
  max-width: 520px;
  display:flex;
  flex-direction: column;
  gap: 20px;
  background: linear-gradient(160deg, var(--charcoal), var(--charcoal-2));
  border: var(--border-hair);
  padding: 32px;
}

.field{ display:flex; flex-direction:column; gap: 8px; }
.field span{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.field-row{ display:flex; gap: 18px; }
.field-row .field{ flex:1; }

input[type="text"], input[type="date"], select{
  background: var(--obsidian);
  border: 1px solid rgba(198,161,91,0.3);
  color: var(--cream);
  padding: 12px 14px;
  font-size: 0.95rem;
  border-radius: var(--radius);
}
input:focus, select:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(198,161,91,0.4);
}

.form-note{
  font-size: 0.82rem;
  min-height: 1.1em;
  color: var(--gold-bright);
}
.form-note.is-error{ color: #d97a6c; }

.btn-gold, .btn-outline{
  align-self: flex-start;
  padding: 13px 30px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.25s ease;
}

.btn-gold{
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-soft));
  border: none;
  color: #17130a;
  font-weight: 500;
}
.btn-gold:hover{ filter: brightness(1.08); }

.btn-outline{
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
}
.btn-outline:hover{ background: rgba(198,161,91,0.12); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 860px){
  .panel-grid{ grid-template-columns: 1fr; }
  .field-row{ flex-direction: column; }
}

@media (max-width: 720px){
  .mainnav{
    position: absolute;
    top: 100%; left:0; right:0;
    background: var(--obsidian);
    border-bottom: var(--border-hair);
    flex-direction: column;
    display:none;
    padding: 8px 0;
  }
  .mainnav.is-open{ display:flex; }
  .mainnav__burger{ display:flex; }
  .mainnav__link{ text-align:left; padding: 14px 28px; }
  .agenda-list__item{ grid-template-columns: 70px 1fr; }
  .agenda-list__delete{ grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
}

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .hero__car.is-idling,
  .hero__car.is-launching,
  .hero__car.is-resetting,
  .hero__trail.is-active{
    animation: none !important;
    transition: none !important;
  }
}