/* ── VARIABLES MOTORISA ── */
:root {
  --mtr-orange: #e6501e;
  --mtr-magenta: #b8338c;
  --mtr-dark: #0f172a;
  --mtr-card: #1e293b;
  --mtr-border: #e5e7eb;
  --mtr-text: #1a1a2e;
  --mtr-muted: #6b7280;
  --mtr-light: #f9fafb;
  --mtr-grad: linear-gradient(135deg, #e6501e, #b8338c);
}

/* ── SECCIONES ── */
.mtr-section { padding: 48px 24px; max-width: 960px; margin: 0 auto; }
.mtr-section-alt { background: var(--mtr-light); padding: 48px 24px; max-width: 100%; }
.mtr-section-alt > * { max-width: 960px; margin-left: auto; margin-right: auto; }
.mtr-section-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mtr-muted); margin-bottom: 8px; }
.mtr-section-title { font-size: clamp(22px,4vw,30px); font-weight: 800; color: var(--mtr-text); margin-bottom: 8px; letter-spacing: -.3px; }
.mtr-section-sub { color: var(--mtr-muted); font-size: 14px; margin-bottom: 28px; line-height: 1.6; }

/* ── BOTONES GENERALES ── */
.mtr-btn { display: inline-block; padding: 13px 22px; border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.mtr-btn:active { transform: scale(.96); }
.mtr-btn-primary { background: var(--mtr-orange); color: #fff; box-shadow: 0 6px 20px rgba(230,80,30,.35); }
.mtr-btn-primary:hover { box-shadow: 0 10px 30px rgba(230,80,30,.5); color: #fff; }
.mtr-btn-secondary { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.mtr-btn-secondary:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ── HERO ── */
.mtr-hero { padding: 56px 24px; text-align: center; position: relative; overflow: hidden; min-height: 430px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.mtr-hero::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,var(--hero-overlay-opacity,0)); pointer-events:none; z-index:0; }
.mtr-hero-inner { position:relative; z-index:1; width:100%; max-width:900px; --hero-gap:0px; }
.mtr-hero-inner > * { box-sizing:border-box; }
.mtr-hero-logo { height:64px; width:64px; object-fit:contain; margin:0 auto 24px; display:block; }
.mtr-hero-eyebrow { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:14px; }
.mtr-hero-title { font-size:clamp(24px,5vw,36px); font-weight:800; margin:0 auto 14px; letter-spacing:-.4px; line-height:1.15; }
.mtr-hero-sub { font-size:15px; color:rgba(255,255,255,.65); max-width:650px; margin:0 auto 32px; line-height:1.7; }
.mtr-hero-btns { display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; }
.mtr-hero-align-left .mtr-hero-logo, .mtr-hero-align-left .mtr-hero-title, .mtr-hero-align-left .mtr-hero-sub { margin-left:0; margin-right:auto; }
.mtr-hero-align-left .mtr-hero-btns { justify-content:flex-start; }
.mtr-hero-align-center .mtr-hero-logo, .mtr-hero-align-center .mtr-hero-title, .mtr-hero-align-center .mtr-hero-sub { margin-left:auto; margin-right:auto; }
.mtr-hero-align-center .mtr-hero-btns { justify-content:center; }
.mtr-hero-align-right .mtr-hero-logo, .mtr-hero-align-right .mtr-hero-title, .mtr-hero-align-right .mtr-hero-sub { margin-left:auto; margin-right:0; }
.mtr-hero-align-right .mtr-hero-btns { justify-content:flex-end; }
.mtr-hero-inner > .mtr-hero-eyebrow + .mtr-hero-title { margin-top:0; }
/* ── OFERTAS ── */
.mtr-ofertas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 18px; }
.mtr-oferta-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--mtr-border); transition: transform .15s, box-shadow .15s; text-decoration: none; display: block; background: #fff; }
.mtr-oferta-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,.1); }
.mtr-oferta-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.mtr-oferta-img-ph { width: 100%; aspect-ratio: 4/3; background: linear-gradient(135deg,#f3f4f6,#e5e7eb); display: flex; align-items: center; justify-content: center; font-size: 48px; }
.mtr-oferta-body { padding: 18px; }
.mtr-badge { display: inline-block; background: #fef2f2; color: var(--mtr-orange); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 8px; margin-bottom: 8px; }
.mtr-oferta-title { font-size: 15px; font-weight: 700; color: var(--mtr-text); margin-bottom: 6px; }
.mtr-oferta-desc { font-size: 13px; color: var(--mtr-muted); line-height: 1.5; }
.mtr-oferta-price { font-size: 18px; font-weight: 800; color: var(--mtr-orange); margin-top: 12px; }

/* ── WEBS GRUPO ── */
.mtr-webs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px; max-width: 960px; margin: 0 auto; }
.mtr-web-card { border: 1px solid var(--mtr-border); border-radius: 14px; padding: 18px; display: flex; align-items: center; gap: 14px; text-decoration: none; background: #fff; transition: border-color .15s, transform .12s, box-shadow .12s; }
.mtr-web-card:hover { border-color: var(--mtr-orange); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(230,80,30,.1); }
.mtr-web-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--mtr-light); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.mtr-web-info b { font-size: 13px; color: var(--mtr-text); display: block; font-weight: 700; }
.mtr-web-info span { font-size: 11px; color: var(--mtr-muted); }
.mtr-web-arrow { margin-left: auto; color: var(--mtr-muted); }

/* ── MARCAS ── */
.mtr-marcas-wrap { background: transparent; border-top: 1px solid var(--mtr-border); border-bottom: 1px solid var(--mtr-border); }
.mtr-marcas-grid { display: grid; gap: 16px; justify-content: center; align-items: center; margin-top: 24px; }
.mtr-marcas-viewport { position: relative; overflow: hidden; }
.mtr-marcas-carousel { --mtr-slides: 4; --mtr-gap: 16px; }
.mtr-marcas-carousel .mtr-marcas-grid { display: flex; gap: var(--mtr-gap); justify-content: flex-start; align-items: stretch; margin-top: 24px; }
.mtr-marcas-carousel .mtr-marca-item { flex: 0 0 calc((100% - (var(--mtr-gap) * (var(--mtr-slides) - 1))) / var(--mtr-slides)); box-sizing: border-box; min-width: 0; }
.mtr-marcas-carousel .mtr-marca-item img { display: block; max-width: 100%; }
.mtr-marcas-prev, .mtr-marcas-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(15,23,42,.9); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mtr-marcas-prev { left: 6px; }
.mtr-marcas-next { right: 6px; }
.mtr-marcas-prev:hover, .mtr-marcas-next:hover { background: var(--mtr-orange); }
.mtr-marcas-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.mtr-marcas-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #cbd5e1; cursor: pointer; }
.mtr-marcas-dots button.active { background: var(--mtr-orange); width: 20px; border-radius: 6px; }
.mtr-marca-item { background: #fff; border: 1px solid var(--mtr-border); border-radius: 12px; padding: 16px 24px; display: flex; align-items: center; justify-content: center; min-width: 130px; transition: border-color .15s, box-shadow .15s; text-decoration: none; }
.mtr-marca-item:hover { border-color: var(--mtr-orange); box-shadow: 0 4px 16px rgba(230,80,30,.1); }
.mtr-marca-item img { height: 36px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.mtr-marca-item span { font-size: 14px; font-weight: 700; color: var(--mtr-muted); }

/* ── NOTICIAS ── */
.mtr-noticias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 18px; }
.mtr-noticia-card { border: 1px solid var(--mtr-border); border-radius: 14px; overflow: hidden; text-decoration: none; display: block; transition: box-shadow .15s; background: #fff; }
.mtr-noticia-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.08); }
.mtr-noticia-img { width: 100%; height: 170px; object-fit: cover; display: block; }
.mtr-noticia-img-ph { width: 100%; height: 170px; background: linear-gradient(135deg,#f3f4f6,#e9ecef); display: flex; align-items: center; justify-content: center; font-size: 40px; }
.mtr-noticia-body { padding: 16px; }
.mtr-noticia-cat { font-size: 11px; font-weight: 700; color: var(--mtr-orange); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.mtr-noticia-title { font-size: 14px; font-weight: 700; color: var(--mtr-text); line-height: 1.4; margin-bottom: 6px; }
.mtr-noticia-date { font-size: 11px; color: var(--mtr-muted); }

/* ── CONTACTO ── */
.mtr-contacto { background: var(--mtr-dark); padding: 56px 24px; border-top: 3px solid var(--mtr-orange); }
.mtr-contacto .mtr-section-title { color: #fff; }
.mtr-contacto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px auto; max-width: 700px; }
@media(max-width:500px) { .mtr-contacto-grid { grid-template-columns: 1fr; } }
.mtr-contacto-item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 18px; display: flex; align-items: flex-start; gap: 14px; }
.mtr-ci-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.mtr-contacto-item b { font-size: 13px; color: #fff; display: block; margin-bottom: 4px; font-weight: 700; }
.mtr-contacto-item span, .mtr-contacto-item a { font-size: 13px; color: rgba(255,255,255,.6); text-decoration: none; display: block; line-height: 1.6; }
.mtr-contacto-item span p { margin: 0 0 6px; }
.mtr-contacto-item span p:last-child { margin-bottom: 0; }
.mtr-contacto-item span ul, .mtr-contacto-item span ol { margin: 6px 0 6px 18px; padding: 0; }
.mtr-contacto-item span strong { color: #fff; }
.mtr-contacto-extra { max-width: 700px; margin: 0 auto 28px; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.7; }
.mtr-contacto-extra p { margin: 0 0 10px; }
.mtr-contacto-extra a { color: #fff; text-decoration: underline; }
.mtr-contacto-item a:hover { color: #fff; }
.mtr-contacto-btns { display: flex; gap: 12px; flex-wrap: wrap; max-width: 700px; margin: 0 auto 28px; }
.mtr-cbtn { padding: 13px 18px; border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 8px; transition: filter .15s; }
.mtr-cbtn:active { transform: scale(.96); }
.mtr-cbtn-wa { background: #25d366; color: #fff; }
.mtr-cbtn-wa:hover { filter: brightness(1.1); color: #fff; }
.mtr-cbtn-tel { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.mtr-cbtn-tel:hover { background: rgba(255,255,255,.18); color: #fff; }
.mtr-cbtn-mail { background: var(--mtr-orange); color: #fff; }
.mtr-cbtn-mail:hover { filter: brightness(1.1); color: #fff; }

/* Formulario */
.mtr-form { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 28px; max-width: 700px; margin: 0 auto; }
.mtr-form h3 { color: #fff; font-size: 16px; margin-bottom: 20px; }
.mtr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media(max-width:500px) { .mtr-form-row { grid-template-columns: 1fr; } }
.mtr-form input, .mtr-form textarea { width: 100%; padding: 12px 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background: rgba(255,255,255,.07); color: #fff; font-size: 14px; font-family: inherit; outline: none; transition: border-color .15s; margin-bottom: 12px; box-sizing: border-box; }
.mtr-form input:focus, .mtr-form textarea:focus { border-color: var(--mtr-orange); }
.mtr-form input::placeholder, .mtr-form textarea::placeholder { color: rgba(255,255,255,.35); }
.mtr-form textarea { resize: vertical; min-height: 100px; }
.mtr-form button { width: 100%; padding: 14px; background: var(--mtr-orange); color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; transition: filter .15s; }
.mtr-form button:hover { filter: brightness(1.1); }
#mtr-form-ok { display: none; text-align: center; padding: 16px; color: #4ade80; font-weight: 600; margin-top: 12px; }

/* ── RESPONSIVE ── */
@media(max-width:600px) {
  .mtr-section, .mtr-contacto { padding: 36px 16px; }
  .mtr-hero { padding: 44px 16px 52px; }
}
