/* Rediseño visual Baviera Motos: estética premium negro/azul, responsive */
:root{--bm-blue:#078cff;--bm-cyan:#00c9ff;--bm-ink:#03101a;--bm-panel:#061722;--bm-line:rgba(0,190,255,.25)}
html{scroll-behavior:smooth; overflow-x:hidden; max-width:100vw; box-sizing:border-box}
body{background:#020a10;color:#ffffff;font-family:Barlow,Arial,sans-serif; overflow-x:hidden; max-width:100vw}
*,*:before,*:after{box-sizing:inherit}
.top{background:rgba(2,10,16,.97);border-bottom:1px solid var(--bm-line);box-shadow:0 10px 32px #0008;position:sticky;top:0;z-index:50;backdrop-filter:blur(12px)}
.top .wrap{max-width:1180px;padding-top:10px;padding-bottom:10px}.top .logo img{width:260px;height:auto;max-height:58px;object-fit:contain}.top nav a{font-weight:600;text-decoration:none}.top nav a:hover{color:var(--bm-cyan)}
main{background:linear-gradient(180deg,#020a10,#061521 50%,#020a10)}main>.wrap,section>.wrap{max-width:1180px}
.hero{max-width:1180px;margin:0 auto;min-height:440px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;padding:42px 34px;background:linear-gradient(90deg,rgba(1,9,15,.98) 0%,rgba(1,9,15,.9) 38%,rgba(1,9,15,.12) 100%),url('hero-mecanico.jpg') center right/cover no-repeat;border-bottom:1px solid var(--bm-line)}
.hero h1{font-size:clamp(2.4rem,5vw,4.4rem);line-height:.96;letter-spacing:-.035em;text-transform:uppercase;max-width:660px;color:#fff;margin:.3em 0}.hero h1 strong,.hero h1 span{color:var(--bm-blue)}.hero p{max-width:520px;font-size:1.12rem;line-height:1.55}.hero .hero-media{display:none}.hero .btn,.btn{background:linear-gradient(110deg,#078cff,#0064d9);border:1px solid #079eff;border-radius:12px;box-shadow:0 8px 22px #007bff26;font-weight:700}.hero .btn:hover,.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
section{padding:48px 24px;border-bottom:1px solid var(--bm-line)}section h2{font-size:clamp(1.8rem,3vw,2.5rem);text-transform:uppercase;letter-spacing:-.02em}section#servicios{background:#04121c}#servicios .service-grid,#servicios .services-grid{gap:18px}#servicios article,#servicios .service-card{background:linear-gradient(145deg,#081e2b,#020a10);border:1px solid var(--bm-line);border-radius:14px;padding:22px}
.brand-showcase{max-width:1180px;margin:0 auto;padding:12px 24px 26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;background:#04121c}.brand-card{min-height:280px;position:relative;overflow:hidden;border:1px solid var(--bm-line);border-radius:4px;background:#020a10;isolation:isolate;display:flex;align-items:flex-end;padding:20px}.brand-card:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#02080e 0%,rgba(2,8,14,.15) 70%),var(--brand-image) center/cover no-repeat;z-index:-1;transition:transform .4s}.brand-card:hover:before{transform:scale(1.05)}.brand-card h2{font-size:1.7rem;margin:0 0 12px;text-shadow:0 2px 10px #000}.brand-card a{display:inline-block;border:2px solid var(--bm-cyan);border-radius:30px;padding:9px 18px;color:#fff;text-decoration:none;font-weight:700;font-size:.85rem}.brand-card a:hover{background:var(--bm-blue)}
.bmw-specialist{background:#03111c!important;padding:0!important}.bmw-specialist__inner{max-width:1180px;min-height:300px;padding:35px!important;background:linear-gradient(90deg,#031b31 0%,rgba(3,17,28,.96) 40%,rgba(3,17,28,.15) 100%),url('bmw-banner.jpg') right center/cover no-repeat;border-left:8px solid var(--bm-blue)}.bmw-specialist__content{max-width:600px}.bmw-specialist__eyebrow{color:var(--bm-cyan);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.bmw-specialist h2{font-size:clamp(2.1rem,4vw,3.5rem);margin:.15em 0}.opiniones{background:#030e17}
footer{background:#01070c;border-top:1px solid var(--bm-line);padding:28px 20px;color:#e8f2fb}footer .wrap{max-width:1180px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}footer .footer-brand{display:block;width:250px;height:auto;margin-bottom:12px}footer a{color:#e8f2fb;text-decoration:none!important}footer a:hover{color:var(--bm-cyan);text-decoration:underline!important}
@media(max-width:760px){.top .wrap{padding:8px 16px}.top .logo img{width:220px;max-height:48px}.hero{display:block;min-height:510px;padding:44px 22px 28px;background:linear-gradient(90deg,rgba(1,9,15,.92),rgba(1,9,15,.55)),url('hero-mecanico.jpg') 58% center/cover no-repeat}.hero h1{font-size:clamp(2.6rem,11vw,4rem);max-width:500px}.hero p{font-size:1rem}.hero .btn{margin:6px 5px 0 0}.brand-showcase{grid-template-columns:1fr;padding:8px 16px 22px}.brand-card{min-height:230px}section{padding:34px 16px}.bmw-specialist__inner{padding:26px 20px!important;min-height:270px;background-position:60% center}footer .footer-brand{width:220px}footer .wrap{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
.hero-eyebrow{color:var(--bm-cyan);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem!important;margin:0 0 10px!important}.hero h1 span{color:var(--bm-blue)}

/* Ajuste responsive de imágenes: el texto ya no tapa la motocicleta del hero */
.hero#marcas{
  display:block!important; position:relative; max-width:none; min-height:0!important;
  margin:0; padding:0!important; overflow:hidden; background:#020a10!important;
  background-image:none!important;
}
.hero#marcas .hero-head{
  box-sizing:border-box; width:100%; max-width:1180px; min-height:420px;
  margin:0 auto; padding:44px 52% 36px 34px!important; position:relative; z-index:2;
  background:linear-gradient(90deg,#020a10 0%,#020a10 42%,rgba(2,10,16,.7) 61%,rgba(2,10,16,0) 100%);
}
.hero#marcas .hero-head h1{max-width:12ch;font-size:clamp(2.35rem,4.5vw,4.25rem);overflow-wrap:normal}
.hero#marcas .hero-head>p:not(.hero-eyebrow){max-width:42ch}
.hero#marcas .hero-media{
  display:block!important; position:absolute; top:0; bottom:auto; right:max(0px,calc((100vw - 1180px)/2));
  width:min(55%,650px); height:420px; margin:0; overflow:hidden; z-index:1; line-height:0;
}
.hero#marcas .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#020a10 0%,rgba(2,10,16,.28) 23%,transparent 48%),linear-gradient(0deg,rgba(2,10,16,.16),transparent 30%);pointer-events:none}
.hero#marcas .hero-media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 44%}
.hero#marcas .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.hero#marcas .cta .btn{margin:0;white-space:normal}
.brand-showcase{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.brand-card{box-sizing:border-box;min-width:0;min-height:0;aspect-ratio:1.5/1;padding:18px;background-size:cover;background-position:center}
.brand-card:before{background-position:center;background-size:cover}
.brand-card h2{font-size:clamp(1.15rem,2vw,1.7rem);overflow-wrap:anywhere}
.bmw-specialist__inner{box-sizing:border-box;background-size:cover;background-position:center right;background-repeat:no-repeat}
.bmw-specialist__content{position:relative;z-index:1}
img{max-width:100%}
@media(max-width:900px){
  .hero#marcas .hero-head{min-height:390px;padding:36px 48% 30px 24px!important}
  .hero#marcas .hero-media{height:390px;width:53%}
  .brand-card{aspect-ratio:1.25/1;padding:14px}
}
@media(max-width:760px){
  .hero#marcas .hero-head{min-height:0;padding:32px 20px 20px!important;background:#020a10}
  .hero#marcas .hero-head h1{font-size:clamp(2.4rem,10.5vw,3.5rem);max-width:12ch}
  .hero#marcas .hero-head>p:not(.hero-eyebrow){font-size:1rem;max-width:38ch}
  .hero#marcas .hero-media{position:relative;top:auto;right:auto;bottom:auto;width:100%;height:clamp(240px,70vw,360px);margin:0}
  .hero#marcas .hero-media::after{background:linear-gradient(0deg,rgba(2,10,16,.18),transparent 45%)}
  .hero#marcas .hero-media img{object-position:center 43%}
  .hero#marcas .cta{gap:8px}
  .hero#marcas .cta .btn{flex:1 1 150px;min-width:0;padding:.7rem .85rem;font-size:.95rem}
  .brand-showcase{grid-template-columns:1fr;padding:12px 16px 22px;gap:14px}
  .brand-card{aspect-ratio:1.55/1;min-height:210px;padding:18px;background-position:center 55%}
  .brand-card h2{font-size:1.45rem}
  .bmw-specialist__inner{min-height:280px;padding:26px 20px!important;background-position:right center;background-size:auto 100%;background-color:#03111c}
  .bmw-specialist__inner:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,17,28,.97),rgba(3,17,28,.76) 58%,rgba(3,17,28,.25));pointer-events:none}
  .bmw-specialist__inner{position:relative}
}
@media(max-width:380px){
  .top .logo img{width:min(190px,calc(100vw - 100px));height:auto;max-height:44px}
  .hero#marcas .hero-head{padding-left:16px!important;padding-right:16px!important}
  .hero#marcas .hero-head h1{font-size:2.25rem}
  .brand-card{min-height:190px}
}

/* Sección Servicios - Tema Oscuro Premium */
section#servicios {
  background: #04121c;
  color: #ffffff;
}
#servicios h2 {
  color: #ffffff;
  margin-bottom: 8px;
}
#servicios p.intro {
  color: #aab8c5;
  font-size: 1.05rem;
  margin-bottom: 24px;
}
#servicios .services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  border-top: none;
}
#servicios .service {
  background: linear-gradient(145deg, #081e2b, #030e17);
  border: 1px solid var(--bm-line);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  position: relative !important;
  overflow: hidden !important;
}
#servicios .service h3 {
  color: var(--bm-cyan);
  font-size: 1.35rem;
  margin-bottom: 8px;
}
#servicios .service p {
  color: #d1e0ec;
  font-size: 0.98rem;
  line-height: 1.55;
}

/* Sección Opiniones */
.opiniones-section {
  background: #030e17;
  padding: 48px 24px;
  border-bottom: 1px solid var(--bm-line);
}
.opiniones-section h2 {
  color: #ffffff;
  margin-bottom: 8px;
}
.opiniones-section .intro {
  color: #aab8c5;
  margin-bottom: 24px;
}

/* Contacto y Cita */
#cita .wrap.book.contact-grid {
  width: min(100% - 2.5rem, 1560px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .82fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.15rem;
  align-items: stretch;
}
#cita .contact-panel {
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid rgba(120, 170, 205, .22);
  border-radius: 16px;
  background: rgba(8, 22, 33, .72);
  color: #f7fbff;
  overflow-wrap: anywhere;
}
#cita .contact-panel h2, #cita .hours-card h3 {
  margin: 0 0 .8rem;
  color: #fff;
  font-size: clamp(1.1rem, 1.3vw, 1.45rem);
  line-height: 1.25;
}
#cita .contact-panel p { line-height: 1.55; }
#cita .contact-panel address { line-height: 1.65; margin: .25rem 0 1rem; }
#cita .contact-form-panel form { display: grid; gap: .8rem; }
#cita .contact-form-panel label { display: grid; gap: .35rem; font-weight: 650; color: #f5f9ff; }
#cita .contact-form-panel input, #cita .contact-form-panel select, #cita .contact-form-panel textarea {
  box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; padding: .8rem .85rem; border-radius: 10px;
  border: 1px solid #c5d0da; background: #fff; color: #17212b; font: inherit;
}
#cita .contact-form-panel textarea { min-height: 100px; resize: vertical; }
#cita .contact-form-panel .btn { width: 100%; white-space: normal; }
#cita .location-actions { display: flex; gap: .45rem; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin: .8rem 0; }
#cita .btn-wheel { width: 68px; height: 68px; flex: 0 0 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; border-radius: 50%; text-decoration: none; color: #fff; border: 1px solid #64798b; background: linear-gradient(145deg, #1d2c38, #08121b); font-size: .72rem; text-align: center; }
#cita .btn-wheel svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#cita .contact-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }
#cita .contact-list a { color: #fff; font-weight: 650; text-underline-offset: 3px; }
#cita .contact-map-panel .map { height: clamp(240px, 24vw, 360px); min-height: 0; margin: 0; overflow: hidden; border-radius: 12px; background: #e7edf2; }
#cita .contact-map-panel .map iframe { display: block; width: 100%; height: 100%; border: 0; }
#cita .map-directions { margin: .75rem 0 0; }
#cita .hours-card { display: flex; flex-direction: column; gap: .65rem; background: #f8fafc; color: #17212b; }
#cita .hours-card h3 { color: #17212b; }
#cita .hours-heading { display: grid; gap: .35rem; }
#cita .hours-status { font-size: .8rem; color: #34516b; }
#cita .hours-list { display: grid; }
#cita .hours-row { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: .45rem; padding: .65rem 0; border-bottom: 1px solid #dbe3ea; font-size: .84rem; align-items: start; }
#cita .hours-row span { color: #40556a; }
#cita .hours-row strong { text-align: right; color: #17212b; line-height: 1.4; }
#cita .hours-note { font-size: .78rem; color: #425466; margin: .25rem 0; }
#cita .hours-card .btn { margin-top: auto; white-space: normal; text-align: center; }
@media(max-width:1250px){
 #cita .wrap.book.contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100% - 2rem, 1000px); }
 #cita .contact-map-panel .map { height: 300px; }
}
@media(max-width:640px){
 #cita .wrap.book.contact-grid { grid-template-columns: minmax(0, 1fr); width: calc(100% - 1.25rem); gap: .8rem; }
 #cita .contact-panel { padding: 1rem; }
 #cita .contact-map-panel .map { height: 260px; }
 #cita .hours-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); font-size: .9rem; }
 #cita .btn-wheel { width: 72px; height: 72px; flex-basis: 72px; }
}

/* --- MAGIA & EFECTO WOW PREMIUM --- */
.floating-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  padding: 12px 22px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
  animation: whatsapp-pulse 2.5s infinite;
}
.floating-whatsapp svg {
  width: 26px;
  height: 26px;
  fill: #fff;
}
.floating-whatsapp span {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.floating-whatsapp:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 15px 35px rgba(37, 211, 102, 0.65);
}
@media(max-width: 600px) {
  .floating-whatsapp {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    bottom: 16px;
    right: 16px;
  }
  .floating-whatsapp span {
    display: none;
  }
}
@keyframes whatsapp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.brand-card, .service, .contact-panel {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.brand-card:hover, .service:hover, .contact-panel:hover {
  border-color: var(--bm-blue);
  box-shadow: 0 16px 45px rgba(7, 140, 255, 0.22);
  transform: translateY(-4px);
}

/* --- ASISTENTE TÉCNICO INTERACTIVO --- */
.interactive-workshop-section {
  background: #030e17;
  padding: 40px 16px;
  border-bottom: 1px solid var(--bm-line);
  overflow: hidden;
  box-sizing: border-box;
}
.interactive-workshop-section h2 {
  color: #fff;
  margin-bottom: 8px;
}
.interactive-workshop-section .intro {
  color: #aab8c5;
  margin-bottom: 24px;
}
.workshop-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.tab-btn {
  background: #081e2b;
  border: 1px solid var(--bm-line);
  color: #aab8c5;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  font-size: 0.9rem;
}
.tab-btn.active, .tab-btn:hover {
  background: linear-gradient(110deg, #078cff, #0064d9);
  color: #fff;
  border-color: var(--bm-blue);
  box-shadow: 0 6px 20px rgba(7, 140, 255, 0.3);
}
.workshop-tab-content {
  display: none;
}
.workshop-tab-content.active {
  display: block;
  animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.calc-box {
  background: linear-gradient(145deg, #061722, #020a10);
  border: 1px solid var(--bm-line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  max-width: 100%;
  box-sizing: border-box;
}
.calc-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
  max-width: 100%;
}
@media(min-width: 760px) {
  .calc-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 24px;
  }
  .calc-box {
    padding: 28px;
  }
  .interactive-workshop-section {
    padding: 56px 24px;
  }
  .tab-btn {
    padding: 12px 20px;
    font-size: 0.95rem;
  }
}
.calc-controls label {
  display: grid;
  gap: 8px;
  font-weight: 600;
  color: #f5f9ff;
  font-size: 0.95rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.calc-controls select {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #3c5267;
  background: #081622;
  color: #fff;
  font: inherit;
  outline: none;
  text-overflow: ellipsis;
  transition: border-color 0.2s;
}
.calc-controls select:focus {
  border-color: var(--bm-cyan);
}
.calc-result {
  background: rgba(3, 16, 26, 0.9);
  border-left: 4px solid var(--bm-blue);
  border-radius: 10px;
  padding: 16px;
  color: #e2f0fb;
  min-height: 140px;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  max-width: 100%;
}
  transition: border-color 0.2s;
}
.calc-controls select:focus {
  border-color: var(--bm-cyan);
}
.calc-result {
  background: rgba(3, 16, 26, 0.9);
  border-left: 4px solid var(--bm-blue);
  border-radius: 10px;
  padding: 20px;
  color: #e2f0fb;
  min-height: 140px;
}
.calc-result h4 {
  color: var(--bm-cyan);
  font-size: 1.2rem;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.calc-result ul {
  margin: 0 0 16px;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}
.calc-result li {
  line-height: 1.5;
}
.calc-result .calc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(110deg, #25d366, #128c7e);
  color: #fff;
  padding: 10px 18px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.3);
  transition: transform 0.2s;
}
.calc-result .calc-cta:hover {
  transform: translateY(-2px);
}

/* --- ANIMACIÓN TIPO HUMO / VAPOR DE ESCAPE (Efecto Pro) --- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-smoke-container {
  position: absolute;
  bottom: 12px;
  left: 15px;
  width: 220px;
  height: 180px;
  pointer-events: none;
  z-index: 20;
  opacity: 0.75;
}
.smoke-puff {
  position: absolute;
  bottom: 0;
  left: 10px;
  width: 55px;
  height: 55px;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(7,140,255,0.7) 45%, transparent 80%);
  border-radius: 50%;
  filter: blur(10px);
  animation: smoke-drift 3s infinite ease-out;
}
.smoke-puff:nth-child(2) {
  left: 45px;
  animation-delay: 1s;
  animation-duration: 3.5s;
}
.smoke-puff:nth-child(3) {
  left: 80px;
  animation-delay: 2s;
  animation-duration: 2.8s;
}
@keyframes smoke-drift {
  0% {
    transform: translateY(0) scale(0.4);
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-150px) scale(2.8);
    opacity: 0;
  }
}

/* --- CORRECCIONES FINALES MÓVIL & DARK THEME (ADIÓS TARJETAS GRISES) --- */
#servicios, .services {
  background: transparent !important;
  color: #fff !important;
}
.service, article.service, #servicios .service, main .service {
  background: linear-gradient(145deg, #081e2b, #030e17) !important;
  color: #ffffff !important;
  border: 1px solid var(--bm-line) !important;
  border-left: 4px solid var(--bm-blue) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  position: relative !important;
  overflow: hidden !important;
}
.service h3, article.service h3, #servicios .service h3, main .service h3 {
  color: var(--bm-cyan) !important;
  font-size: 1.35rem !important;
  margin-bottom: 8px !important;
}
.service p, article.service p, #servicios .service p, main .service p {
  color: #d1e0ec !important;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
}

/* Elfsight Reviews Overflow fix */
.opiniones-section, #opiniones {
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.elfsight-app-f5adcce9-8e17-4764-82c0-1d85ddad4f5c {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Brand buttons mobile stack (1 column) */
@media(max-width: 760px) {
  .brands {
    grid-template-columns: 1fr !important;
  }
  .brand {
    padding: 16px 20px !important;
  }
}

/* --- EFECTOS VISUALES EXTRA: MAGIA DE TALLER (Engranajes) --- */
.service::before {
  content: "⚙";
  position: absolute;
  top: -15px;
  right: -10px;
  font-size: 5.5rem;
  color: rgba(0, 201, 255, 0.03);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
  pointer-events: none;
  user-select: none;
}
.service:hover::before {
  transform: rotate(60deg) scale(1.15);
  color: rgba(7, 140, 255, 0.09);
}

/* Chispa solo en botones de llamada a la acción principales (.cta .btn) */
.cta .btn {
  position: relative !important;
  overflow: hidden !important;
}
.cta .btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.6s ease;
  pointer-events: none;
}
.cta .btn:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* --- MENÚ HAMBURGUESA MÓVIL (GLOBAL) --- */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 8px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle .bars {
  position: relative;
}
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (max-width: 860px) {
  .top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .nav-toggle { display: inline-flex !important; }
  .top nav { display: none !important; flex: 0 0 100%; order: 3; width: 100%; }
  .top.menu-open nav { display: block !important; background: rgba(2, 12, 20, 0.98); backdrop-filter: blur(16px); border-top: 1px solid var(--bm-line); padding: 12px 16px 20px; border-radius: 0 0 16px 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.7); }
  .top nav ul { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
  .top nav li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .top nav li:first-child { border-top: none; }
  .top nav a { display: block; padding: 12px 8px; color: #fff; text-decoration: none; font-size: 1.05rem; }
  .top nav a:hover { color: var(--bm-cyan); }
}