/* =====================
   MauroRepairs UI - CSS
   Moderno, limpio y responsivo
   ===================== */

:root{
  /* Fondo y textos */
  --bg1:#0f172a; /* azul marino oscuro */
  --bg2:#1e293b; /* azul grisáceo oscuro */
  --text:#ffffff;
  --muted:#94a3b8;

  /* Cards */
  --card-bg:rgba(30,41,59,.55);
  --card-border:rgba(148,163,184,.16);
  --shadow:0 10px 40px rgba(2,6,23,.45);

  /* Marcas */
  --wa:#25d366;
  --fb:#1877f2;
  --ig1:#f09433; --ig2:#e6683c; --ig3:#dc2743; --ig4:#cc2366; --ig5:#bc1888;
  --maps:#e63946;

  /* Tipografías fluidas */
  --fs-base: clamp(0.98rem, 1.6vw, 1.06rem);
  --fs-sub: clamp(0.9rem, 1.4vw, 1rem);
  --fs-title: clamp(1.05rem, 1.8vw, 1.15rem);
}

/* Reset mínimo */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 300px at 120% -10%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(900px 260px at -20% 110%, rgba(168,85,247,.16), transparent 60%),
    linear-gradient(135deg, #000 0%, #0b0b10 40%, #0f172a 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  display:grid; grid-template-rows:auto 1fr auto; place-items:center;
  padding-left:15px; padding-right:15px;
}

/* Globos sutiles (look tecnológico) */
body::before, body::after{
  content:""; position:absolute; border-radius:50%; filter:blur(80px); opacity:.18; pointer-events:none;
}
body::before{width:520px;height:520px; background:#6d28d9; top:-160px; left:-160px}
body::after {width:520px;height:520px; background:#06b6d4; bottom:-180px; right:-180px}

/* Header */
.site-header{ text-align:center; padding:42px 20px 24px }
.logo{ width:100%; height:auto; max-width:220px }
@media (max-width:1024px){ .logo{ max-width:180px } }
@media (max-width:600px){ .logo{ max-width:140px } }
.slogan{ margin:0 auto; max-width:560px; color:var(--muted); font-weight:300; font-size:1.05rem }

/* Contenido */
.content{ width:100%; display:flex; justify-content:center; }
.stack{
  display:grid; gap:18px; width:100%; max-width:1200px; justify-content:center;
  grid-template-columns: 1fr;
}
@media (min-width:601px){
  .stack{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (min-width:1200px){
  .stack{ grid-template-columns: repeat(4, minmax(0, 1fr)) }
}

/* Cards (botones) */
.card{
  width:90%; max-width:720px; display:flex; align-items:center; gap:14px;
  padding:18px 18px; text-decoration:none; color:var(--text);
  border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(34,211,238,.14) 50%, rgba(147,51,234,.14));
  border:1px solid rgba(148,163,184,.16);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:22px 20px;
  margin:6px 0;
}
.card:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow:0 18px 48px rgba(59,130,246,.28), 0 10px 30px rgba(0,0,0,.35);
  border-color:rgba(255,255,255,.22);
}
.card::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .2s ease;
  background:
    linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
    radial-gradient(800px 240px at -10% -20%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(700px 200px at 120% 120%, rgba(20,184,166,.14), transparent 60%);
}
.card:hover::before{ opacity:1 }

.left{ width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:12px; flex-shrink:0; border:1px solid rgba(255,255,255,.08) }
.left i{ font-size:1.6rem }
.center{ flex:1; text-align:left }
.title{ font-weight:600; font-size:1.06rem }
.subtitle{ color:var(--muted); font-size:.92rem; margin-top:2px }
.right{ color:rgba(255,255,255,.7) }

/* Colores por card */
.card-whatsapp{ border-color:rgba(37,211,102,.3) }
.card-whatsapp .left{ background:rgba(37,211,102,.12); color:var(--wa) }
.card-whatsapp:hover{ border-color:var(--wa); box-shadow:0 16px 52px rgba(37,211,102,.28) }

.card-instagram{ border-color:rgba(221,42,123,.3) }
.card-instagram .left{ background:linear-gradient(45deg,var(--ig1) 0%,var(--ig2) 25%,var(--ig3) 50%,var(--ig4) 75%,var(--ig5) 100%); color:#fff }
.card-instagram:hover{ border-color:#9b4cff; box-shadow:0 16px 52px rgba(155,76,255,.28) }

.card-facebook{ border-color:rgba(24,119,242,.3) }
.card-facebook .left{ background:rgba(24,119,242,.12); color:var(--fb) }
.card-facebook:hover{ border-color:var(--fb); box-shadow:0 16px 52px rgba(24,119,242,.28) }

.card-maps{ border-color:rgba(230,57,70,.3) }
.card-maps .left{ background:rgba(230,57,70,.12); color:var(--maps) }
.card-maps:hover{ border-color:var(--maps); box-shadow:0 16px 52px rgba(230,57,70,.28) }

/* Layout vertical para cards con icono arriba */
.card h3{ margin:8px 0 4px 0; font-size:1.06rem; font-weight:600; color:#fff }
.card p{ margin:0; color:#cbd5e1; font-size:.92rem }

/* Íconos grandes y centrados */
.card i{ font-size:2rem; margin-bottom:10px; display:block }

/* Colores de iconos por marca */
.whatsapp i{ color:#25d366 }
.instagram i{ color:#e1306c }
.facebook i{ color:#1877f2 }
.maps i{ color:#e63946 }

/* Hover: el ícono hereda el glow del color correspondiente */
.whatsapp:hover{ box-shadow:0 16px 52px rgba(37,211,102,.28), var(--shadow) }
.instagram:hover{ box-shadow:0 16px 52px rgba(225,48,108,.28), var(--shadow) }
.facebook:hover{ box-shadow:0 16px 52px rgba(24,119,242,.28), var(--shadow) }
.maps:hover{ box-shadow:0 16px 52px rgba(230,57,70,.28), var(--shadow) }

/* Efecto escala suave ya existente + asegurado */
.card{ transform:translateY(0) scale(1); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease }
.card:hover{ transform:translateY(-6px) scale(1.03) }

/* Responsive: 90% móvil, 50% tablet, tope de 300px en desktop */
@media (max-width:600px){
  .logo{ width:68% }
  .card{ width:100% }
  .left{ width:54px; height:54px }
  .card h3{ font-size:1.02rem }
}
@media (min-width:601px) and (max-width:1024px){
  /* Tablet: 50% */
  .card{ width:48% }
}
@media (min-width:1025px){
  /* Desktop: centradas con máx 300px */
  .stack{ justify-content:center }
  .card{ width:100%; max-width:300px }
}

/* Espaciado extra entre secciones */
.site-header{ padding-bottom:28px }
.content{ padding-top:0; padding-bottom:48px }
.site-footer{ padding-top:32px; text-align:center; margin-top:40px }
.site-footer small{ font-size: clamp(0.82rem, 1.2vw, 0.92rem) }

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .card, .card::before{ transition:none }
  .card:hover{ transform:none }
}

/* Footer */
.site-footer{ width:100%; padding:28px 16px 44px; margin-top:auto }