﻿/* pages.css - MotoMejia Page-specific styles */
.mm-seccion { padding-block: 72px; }
.mm-seccion-confianza { background: var(--mm-fondo-2); }
.mm-seccion-categorias { background: var(--mm-superficie); }
.mm-seccion-destacados { border-block: 1px solid var(--mm-borde); }
.mm-seccion-encabezado { margin-bottom: 24px; }
.mm-seccion-encabezado-fila { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.mm-seccion-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--mm-primario);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mm-enlace-seccion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mm-primario);
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
}
.mm-enlace-seccion span { transition: transform var(--mm-t-rapida) var(--mm-ease); }
.mm-enlace-seccion:hover span { transform: translateX(4px); }
.mm-seccion-gris { background: radial-gradient(1000px 400px at 85% 0%, rgba(7,87,213,0.03), transparent 60%), var(--mm-fondo-2); }
.mm-cabecera-pagina {
  background: linear-gradient(160deg, #061A40 0%, #003B9A 100%);
  color: #fff;
  padding-block: clamp(32px,6vw,48px) clamp(28px,5vw,40px);
  border-bottom: 1px solid var(--mm-borde);
}
.mm-cabecera-pagina h1 {
  font-family: var(--mm-fuente-titulo);
  font-size: clamp(1.6rem,3.5vw,2.4rem);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.15;
}
.mm-cabecera-pagina p { color: rgba(255,255,255,0.75); margin-top:6px; max-width:720px; font-size:0.95rem; }
.mm-cabecera-pagina .mm-seccion-kicker { color: #93C5FD; margin-bottom: 12px; }

.mm-hero-chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.mm-hero-chip { background:rgba(255,255,255,0.1); color:#fff; padding:8px 18px; border-radius:999px; font-size:0.85rem; font-weight:600; text-decoration:none; border:1px solid rgba(255,255,255,0.1); transition:all var(--mm-t-rapida) var(--mm-ease); }
.mm-hero-chip:hover { background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.25); }

.mm-banda-wa {
  background: linear-gradient(135deg, #061A40, #003B9A);
  color: #fff;
  padding: 48px 24px;
  border-radius: var(--mm-radio-m);
  text-align: center;
  margin-block: 40px;
  position: relative;
  overflow: hidden;
}
.mm-banda-wa::before { content:''; position:absolute; inset:0; background:radial-gradient(500px 300px at 70% 30%, rgba(37,211,102,0.08), transparent); pointer-events:none; }
.mm-banda-wa h2 { font-family:var(--mm-fuente-titulo); font-size:1.6rem; margin-bottom:12px; }
.mm-banda-wa p { color:rgba(255,255,255,0.75); margin-bottom:20px; max-width:500px; margin-inline:auto; }
.mm-cta-cotizacion { display: grid; justify-items: center; gap: 8px; }
.mm-cta-cotizacion .mm-seccion-kicker { color: #93C5FD; margin-bottom: 0; }

.mm-contacto-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:24px; }
.mm-tarjeta-contacto { background:var(--mm-superficie); border:1px solid var(--mm-borde); border-radius:var(--mm-radio-m); padding:28px; box-shadow:var(--mm-sombra-xs); }
.mm-tarjeta-contacto h3 { font-size:1.1rem; color:var(--mm-primario); margin-bottom:8px; }
.mm-tarjeta-contacto p { color:var(--mm-texto-suave); font-size:0.9rem; line-height:1.6; }

.mm-valores { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px; padding-block:40px; }
.mm-valor { background:var(--mm-superficie); border:1px solid var(--mm-borde); border-radius:var(--mm-radio-m); padding:24px; box-shadow:var(--mm-sombra-xs); }
.mm-valor h3 { color:var(--mm-primario); margin-bottom:8px; }
.mm-valor p { color:var(--mm-texto-suave); font-size:0.9rem; }
.mm-nosotros-mision { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; padding-block:40px; }

[data-categorias] .mm-card-categoria { aspect-ratio:1/1; overflow:hidden; width:100%; background:linear-gradient(180deg,#FFFFFF,#EAF3FF); }
[data-categorias] .mm-card-categoria img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; background:#EAF3FF; }
[data-categorias] .mm-card-categoria:hover img { opacity:1; transform:scale(1.04); }

@media (max-width:640px) {
  .mm-seccion { padding-block:48px; }
  .mm-seccion-encabezado-fila { align-items: start; flex-direction: column; gap: 8px; }
  .mm-banda-wa { padding:32px 20px; margin-block:24px; }
  .mm-banda-wa h2 { font-size:1.3rem; }
}
