@import url('styles.css');

/* Variante oscura: misma estructura y contenido, solo cambia el tratamiento visual. */
:root {
  --cream: #171817;
  --paper: #242522;
  --ink: #f4f0e9;
  --olive: #878777;
  --olive-deep: #a7a897;
  --yellow: #ffdc6c;
  --line: rgba(244, 240, 233, .18);
}

body { background: var(--cream); color: var(--ink); }
.site-header { background: rgba(23, 24, 23, .92); border-bottom-color: rgba(244, 240, 233, .1); }
.brand { width: 128px; height: 42px; overflow: hidden; display: flex; align-items: center; }
.brand img { width: 100%; max-width: none; flex: none; filter: invert(1); mix-blend-mode: screen; }
.hero-copy, .intro, .story, .location, .reviews { background: var(--cream); }
.hero-media { background: #111; }
.ticker { color: #171817; }
.ticker-track { gap: 0; }
.ticker-logo { width: 15px; height: 15px; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.8); }
.intro-copy p:not(.lead), .value-card p, .story-copy > p, .location-copy > p, .location-address, .location-address span { color: rgba(244, 240, 233, .67); }
.value-card h3, .story-stats strong, .location-address strong { color: var(--ink); }
.value-card { border-color: var(--line); }

.section-dark, .contact { background: #111211; color: #f4f0e9; }
.section-heading > p, .service-card > p, .service-features, .vat-note { color: rgba(244, 240, 233, .67); }
.service-card { background: #252724; }
.service-card h3, .service-card .service-index { color: #f4f0e9; }
.service-card .service-tag { color: rgba(244, 240, 233, .72); }
.service-card-accent { background: var(--yellow); color: #171817; }
.service-card-accent h3, .service-card-accent .service-index, .service-card-accent .service-tag { color: #171817; }
.service-card-accent > p, .service-card-accent .service-features { color: rgba(23, 24, 23, .72); }
.card-link { color: #f4f0e9; border-color: rgba(244, 240, 233, .5); }
.service-card-accent .card-link { color: #171817; border-color: rgba(23, 24, 23, .5); }
.button-dark { background: #f4f0e9; color: #171817; }
.hero-actions .button-dark { background: var(--yellow); color: #171817; }
.hero-actions .button-dark span { color: #171817; }
.button-yellow { color: #171817; }
.button-ghost { color: #f4f0e9; }
.site-nav .nav-cta { background: var(--yellow); color: #171817; }
.site-nav .nav-cta span { color: #171817; }
.location .image-label { background: var(--yellow); color: #171817; display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; }
.location .image-label:hover, .location .image-label:focus-visible { background: #171817; color: var(--yellow); }
.story .image-label { color: #171817; }

.section-olive { background: #77786d; color: #f4f0e9; }
.manifesto-copy > p { color: rgba(244, 240, 233, .72); }
.reviews .review { background: var(--paper); }
.review figcaption { color: var(--olive-deep); }
.location { background: var(--paper); }
.location .button-dark { background: #f4f0e9; }
.location .button-dark span { color: #171817; }
.contact-details, .contact-hours { color: rgba(244, 240, 233, .68); }
.site-footer { color: #171817; }
.site-footer img { filter: none; mix-blend-mode: multiply; }
.hero-note { align-items: center; gap: 10px; }
.hero-note span:first-child { font-family: Anton, sans-serif; font-size: 1.4rem; letter-spacing: 0; color: var(--ink); }
.hero-copy h1 em, .intro h2 em { color: var(--yellow); }

@media (max-width: 900px) {
  .brand { width: 110px; height: 38px; }
  .site-nav { background: #171817; }
  .site-nav a { border-color: rgba(244, 240, 233, .16); color: #f4f0e9; }
  .menu-toggle span:not(.sr-only) { background: #f4f0e9; }
}