/* ===================================================
   MARATÓN URBANO — Custom Theme Override
   Sobre el tema Toluca de Tiendanube
=================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* --- Variables del tema (overrides de Toluca) --- */
:root {
  --main-background:             #FAF7F2;
  --main-foreground:             #2C1A0E;
  --accent-color:                #D96A2A;
  --secondary-color:             #EFE2CC;
  --button-background:           #D96A2A;
  --button-foreground:           #ffffff;
  --body-font:                   'Inter', sans-serif;
  --heading-font:                'Inter', sans-serif;
  --title-font-weight:           800;
  --border-solid:                1px solid;
  --border-radius-half:          9999px;
  --main-foreground-opacity-10:  rgba(44,26,14,.10);
  --main-foreground-opacity-20:  rgba(44,26,14,.20);
  --main-foreground-opacity-30:  rgba(44,26,14,.30);
  --main-foreground-opacity-50:  rgba(44,26,14,.50);
  --main-background-opacity-50:  rgba(250,247,242,.50);

  /* Header */
  --header-background:            #2C1A0E;
  --header-foreground:            #FAF7F2;
  --header-foreground-opacity-10: rgba(250,247,242,.10);
  --header-foreground-opacity-20: rgba(250,247,242,.20);

  /* Nav desktop */
  --nav-desktop-background:              #2C1A0E;
  --nav-desktop-foreground:              #FAF7F2;
  --nav-desktop-foreground-opacity-08:   rgba(250,247,242,.08);
  --nav-desktop-foreground-opacity-10:   rgba(250,247,242,.10);
  --nav-desktop-foreground-opacity-20:   rgba(250,247,242,.20);

  /* Footer */
  --footer-background:            #2C1A0E;
  --footer-foreground:            #C49058;
  --footer-foreground-opacity-10: rgba(196,144,88,.10);
  --footer-foreground-opacity-20: rgba(196,144,88,.20);
  --footer-foreground-opacity-50: rgba(196,144,88,.50);
  --footer-foreground-opacity-60: rgba(196,144,88,.60);
  --footer-foreground-opacity-80: rgba(196,144,88,.80);

  /* Colores propios MU */
  --mu-cream:        #FAF7F2;
  --mu-cream-alt:    #EFE2CC;
  --mu-border:       #D9B98F;
  --mu-brown-light:  #C49058;
  --mu-brown-mid:    #8A5225;
  --mu-ink:          #2C1A0E;
  --mu-orange:       #D96A2A;
  --mu-orange-dark:  #B85420;
}

/* ---- OVERRIDES DIRECTOS (por si las variables no cascadean) ---- */

body { font-family: 'Inter', sans-serif !important; }

/* Header */
.head-main {
  background-color: #2C1A0E !important;
  color: #FAF7F2 !important;
  fill: #FAF7F2 !important;
}
.head-main a,
.head-main .svg-icon-text,
.head-main button,
.head-main .btn-link {
  color: #FAF7F2 !important;
  fill: #FAF7F2 !important;
}
.head-main svg { fill: #FAF7F2 !important; }

/* Nav (barra de menú dentro del header) */
.head-main .menu-and-banners-row,
.head-main .nav-primary,
.nav-desktop-list,
.nav-desktop-list > .nav-item-desktop > .nav-item-container {
  background-color: #2C1A0E !important;
  color: #FAF7F2 !important;
}
.head-main .menu-and-banners-row a,
.head-main .menu-and-banners-row .btn-link,
.nav-desktop-list a {
  color: #FAF7F2 !important;
  fill: #FAF7F2 !important;
}

/* Footer */
footer {
  background: #2C1A0E !important;
  color: #C49058 !important;
}
footer a,
footer .contact-link,
footer .footer-menu-item,
footer .btn-link {
  color: #C49058 !important;
}
footer svg { fill: #C49058 !important; }

/* Botones primarios */
.btn-primary {
  background-color: #D96A2A !important;
  border-color: #D96A2A !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #B85420 !important;
  border-color: #B85420 !important;
}

/* ---- TICKER DE MARCAS ---- */
@keyframes mu-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.mu-ticker-section {
  background: #fff;
  border-bottom: 1px solid var(--mu-border);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
  mask-image:         linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
}

.mu-ticker-track {
  display: flex;
  width: max-content;
  animation: mu-ticker 45s linear infinite;
  will-change: transform;
  padding: 12px 0;
}

.mu-ticker-section:hover .mu-ticker-track { animation-play-state: paused; }

.mu-brand-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 130px;
  height: 58px;
  background: #fff;
  border: 1px solid var(--mu-border);
  border-radius: 12px;
  padding: 10px 18px;
  margin: 0 8px;
  box-shadow: 0 1px 6px rgba(44,26,14,.07);
  transition: box-shadow .2s, border-color .2s;
}

.mu-brand-box:hover { border-color: var(--mu-brown-light); box-shadow: 0 3px 12px rgba(44,26,14,.12); }
.mu-brand-box svg   { max-width: 110px; max-height: 30px; width: auto; height: auto; opacity: .78; transition: opacity .25s; }
.mu-brand-box:hover svg { opacity: 1; }

/* ---- BENEFICIOS ---- */
.mu-benefits-section {
  background: #fff;
  border-top: 1px solid var(--mu-border);
  border-bottom: 1px solid var(--mu-border);
  padding: 40px 16px;
}

.mu-benefits-grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 24px;
  text-align: center;
}

@media(min-width:768px){ .mu-benefits-grid { grid-template-columns: repeat(4,1fr); } }

.mu-benefit { display:flex; flex-direction:column; align-items:center; gap:6px; }
.mu-benefit-icon { font-size:28px; }
.mu-benefit strong { font-size:14px; font-weight:700; color:var(--mu-ink); }
.mu-benefit p { font-size:12px; color:var(--mu-brown-mid); margin:0; }

/* ---- TESTIMONIOS ---- */
@keyframes mu-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.mu-testimonials-section { background: var(--mu-cream); padding: 56px 0; }

.mu-testimonials-header {
  max-width: 1280px;
  margin: 0 auto 28px;
  padding: 0 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.mu-testimonials-title { font-size:22px; font-weight:900; color:var(--mu-ink); margin:0 0 4px; }
.mu-testimonials-stars { font-size:13px; color:#D4A017; }
.mu-testimonials-sub   { font-size:12px; color:var(--mu-brown-mid); margin:0; }
.mu-testimonials-link  { font-size:12px; color:var(--mu-brown-mid); text-decoration:none; white-space:nowrap; }
.mu-testimonials-link:hover { text-decoration:underline; }

.mu-marquee-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 60px, black calc(100% - 60px), transparent);
  mask-image:         linear-gradient(to right, transparent, black 60px, black calc(100% - 60px), transparent);
}

.mu-marquee-wrap:hover .mu-marquee-track { animation-play-state: paused; }

.mu-marquee-track {
  display: flex;
  width: max-content;
  animation: mu-marquee 55s linear infinite;
  will-change: transform;
  padding: 8px 0;
}

.mu-review-card {
  width: 280px;
  flex-shrink: 0;
  margin-right: 16px;
  background: #fff;
  border: 1px solid var(--mu-border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mu-review-stars  { color:#D4A017; font-size:13px; }
.mu-review-text   { font-size:13px; line-height:1.6; color:#4A3520; flex:1; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.mu-review-footer { display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--mu-border); }
.mu-review-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; flex-shrink:0; }
.mu-review-name   { font-size:13px; font-weight:600; color:var(--mu-ink); margin:0; }

/* ---- FAQ ---- */
.mu-faq-section { background:#fff; border-top:1px solid var(--mu-border); padding:56px 16px; }
.mu-faq-inner   { max-width:680px; margin:0 auto; }
.mu-faq-title   { font-size:22px; font-weight:900; color:var(--mu-ink); text-align:center; margin:0 0 32px; }
.mu-faq-list    { border-top:1px solid var(--mu-border); }

details.mu-faq-item { border-bottom:1px solid var(--mu-border); }

details.mu-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--mu-ink);
  font-family: 'Inter', sans-serif;
}

details.mu-faq-item summary::-webkit-details-marker { display:none; }

.mu-faq-chevron {
  width:16px; height:16px; flex-shrink:0;
  color:var(--mu-brown-light);
  transition: transform .2s;
}

details.mu-faq-item[open] .mu-faq-chevron { transform: rotate(180deg); }

.mu-faq-answer {
  padding-bottom:16px;
  font-size:13px;
  line-height:1.7;
  color:var(--mu-brown-mid);
}