@import url('https://fonts.googleapis.com/css2?family=League+Gothic&family=Orbitron:wght@700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap');

/* Sistema visual oficial MSP - Manual de marca 2025 */
:root {
  --bg: #362b24;
  --panel: #2e241f;
  --line: rgba(241, 227, 203, 0.2);
  --ink: #f1e3cb;
  --muted: #c9b99f;
  --orange: #df5312;
  --orange2: #ee6728;
  --cream: #f1e3cb;
  --earth: #362b24;
  --sand: #c9b99f;
}

html,
body {
  background: var(--bg);
}

body {
  color: var(--ink);
  font-family: "Satoshi", "Avenir Next", Avenir, Arial, sans-serif;
}

.site-header.is-fixed {
  background: rgba(54, 43, 36, 0.95);
  border-color: rgba(241, 227, 203, 0.18);
}

.site-header.menu-open {
  background: var(--bg);
}

.menu-button i {
  background: var(--cream);
}

.brand {
  gap: 13px;
}

.logo-symbol {
  background: var(--orange);
}

.wordmark {
  width: 154px;
}

.wordmark b {
  color: var(--ink);
  font-family: "Orbitron", "Bank Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0.015em;
}

.wordmark em {
  margin-top: 3px;
  color: var(--ink);
  font-family: "League Gothic", "Arial Narrow", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.235em;
}

nav,
.header-cta,
.primary-button,
.text-link,
.outline-button,
.instagram-link,
.service-card a,
.hero-foot,
.section-number,
.kicker,
.machine-copy li b,
.project-meta strong,
.values b,
.contact-card > span,
footer p,
footer > a:last-of-type {
  font-family: "Orbitron", "Bank Gothic", sans-serif;
}

nav,
.header-cta,
.primary-button,
.text-link,
.outline-button,
.instagram-link,
.service-card a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.025em;
}

h1,
h2,
.video-copy h3 {
  font-family: "League Gothic", "Arial Narrow", sans-serif;
  font-weight: 400;
  letter-spacing: 0.008em;
  line-height: 0.89;
}

h1 {
  font-size: clamp(78px, 9vw, 132px);
}

h2 {
  font-size: clamp(62px, 7.2vw, 104px);
}

.service-card h3 {
  font-family: "Orbitron", "Bank Gothic", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(37, 28, 23, 0.96) 0%, rgba(54, 43, 36, 0.78) 44%, rgba(54, 43, 36, 0.12) 79%),
    linear-gradient(0deg, rgba(54, 43, 36, 0.72), transparent 50%);
}

.hero-copy,
.hero-foot strong {
  color: var(--ink);
}

.hero-foot i {
  background: linear-gradient(90deg, var(--orange) 48%, rgba(241, 227, 203, 0.3) 48%);
}

.intro {
  background: #30251f;
}

.service-card {
  background: #3a2e27;
}

.service-card:hover {
  background: #42342c;
}

.service-card > span {
  color: rgba(201, 185, 159, 0.55);
}

.machine-image {
  background: var(--panel);
}

.machine-image::after {
  background: linear-gradient(90deg, transparent 50%, var(--bg));
}

.machine-copy li span,
.about-content > p:last-of-type,
.reviews-intro > p:last-child,
.values span {
  color: var(--muted);
}

.outline-button {
  color: var(--ink);
  border-color: rgba(241, 227, 203, 0.35);
}

.projects {
  background: var(--ink);
  color: var(--bg);
}

.projects .section-number,
.projects-head > p,
.project-meta p {
  color: #76675c;
}

.project-feature {
  background: var(--bg);
  color: var(--ink);
}

.before-after figcaption,
.machine-image > span {
  background: var(--orange);
  color: var(--bg);
}

.instagram-grid figcaption {
  color: var(--ink);
}

.instagram-link {
  border-color: var(--bg);
}

.video-showcase {
  background: var(--bg);
  color: var(--ink);
}

.video-copy p,
.video-showcase figcaption {
  color: var(--muted);
}

.about,
.reviews {
  background: var(--bg);
  color: var(--ink);
}

.review-form {
  border-color: var(--line);
  background: var(--panel);
}

.review-form label > span,
.rating-item legend,
.review-progress > span {
  color: var(--muted);
  font-family: "Orbitron", "Bank Gothic", sans-serif;
}

.review-form input[type="text"],
.review-form textarea {
  border-color: rgba(201, 185, 159, 0.28);
  background: #3a2e27;
  color: var(--ink);
}

.review-form input:focus,
.review-form textarea:focus {
  background: #403229;
}

.review-progress i {
  background: rgba(201, 185, 159, 0.24);
}

.stars button {
  color: rgba(201, 185, 159, 0.35);
}

.stars button.lit {
  color: var(--orange);
}

.review-message {
  color: var(--ink);
}

.contact {
  background: var(--orange);
  color: var(--bg);
}

.contact .section-number {
  color: #6b2509;
}

.contact .kicker {
  color: var(--bg);
}

.contact h2 em {
  color: var(--ink);
}

.contact-card {
  background: var(--ink);
  color: var(--bg);
}

.contact-card > span,
.whatsapp-big b {
  color: var(--orange);
}

.whatsapp-big {
  border-color: rgba(54, 43, 36, 0.22);
}

.whatsapp-big small,
.contact-card > div {
  color: #74655a;
}

footer {
  background: #2b211c;
  border-color: var(--line);
}

footer p,
footer small {
  color: var(--muted);
}

@media (max-width: 980px) {
  .machine-image::after {
    background: linear-gradient(0deg, var(--bg), transparent 45%);
  }
}

@media (max-width: 700px) {
  .wordmark {
    width: 125px;
  }

  .wordmark b {
    font-size: 11.5px;
  }

  .wordmark em {
    font-size: 15px;
    letter-spacing: 0.2em;
  }

  h1 {
    font-size: clamp(64px, 19vw, 92px);
  }

  h2 {
    font-size: clamp(54px, 16vw, 78px);
  }
}

/* Tipografia de lectura: misma familia clara usada en las fichas de obra.
   Orbitron queda reservada para la marca y pequenos acentos del sistema. */
nav,
.header-cta,
.primary-button,
.text-link,
.outline-button,
.instagram-link,
.service-card h3,
.service-card a,
.machine-copy li b,
.machine-copy li span,
.project-meta span,
.project-meta strong,
.project-meta p,
.instagram-grid figcaption,
.instagram-grid figcaption span,
.instagram-grid figcaption b,
.video-showcase figcaption {
  font-family: "Satoshi", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
}

nav,
.header-cta,
.primary-button,
.text-link,
.outline-button,
.instagram-link,
.service-card a {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.service-card h3,
.machine-copy li b,
.project-meta strong {
  font-weight: 700;
  letter-spacing: -0.015em;
}