/* ==========================================================================
   MUTODESA v4 — corporativa sobria
   Blanco, azul de marca, gris oscuro de texto. Sin fondos oscuros salvo
   la barra superior y el pie. Formas rectas, poco radio, nada de emojis.
   ========================================================================== */

:root{
  --blue:      #1355a4;
  --blue-dark: #0e3f7e;
  --blue-900:  #0c2340;
  --blue-050:  #eef4fb;
  --ink:       #1f2a37;
  --grey:      #5b6774;
  --grey-soft: #7b8794;
  --line:      #e3e8ef;
  --white:     #ffffff;
  --soft:      #f7f9fc;
  --star:      #f2a71b;
  --radius:    8px;
  --max:       1200px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:120px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  background:var(--white);
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0 0 .5em; color:var(--blue-900); line-height:1.2; letter-spacing:-.02em; font-weight:700; }
h1{ font-size:clamp(2rem, 1.3rem + 2.6vw, 3.1rem); font-weight:800; line-height:1.12; }
h2{ font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
h3{ font-size:1.12rem; font-weight:650; }
p{ margin:0 0 1rem; color:var(--grey); max-width:68ch; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-decoration:none; }
img,video{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 clamp(1.1rem,3.5vw,2rem); }
.section{ padding:clamp(3rem,6vw,5rem) 0; }
.section--soft{ background:var(--soft); }
.section__head{ max-width:62ch; margin-bottom:2.4rem; }
.kicker{
  display:block; color:var(--blue); font-weight:650; font-size:.82rem;
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:.5rem;
}
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--blue); color:#fff; padding:.75rem 1.1rem; font-weight:600; }
.skip:focus{ left:0; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Barra superior ---------- */
.topbar{ background:var(--blue-900); color:#c9d6e5; font-size:.84rem; }
.topbar__inner{
  max-width:var(--max); margin:0 auto; padding:.5rem clamp(1.1rem,3.5vw,2rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.topbar strong{ color:#fff; font-weight:600; }
.topbar__dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#3ecf8e; margin-right:.5rem; vertical-align:middle; }
.topbar a:hover{ color:#fff; }

/* ---------- Cabecera ---------- */
.header{ position:sticky; top:0; z-index:50; background:var(--white); border-bottom:1px solid var(--line); }
.header.is-scrolled{ box-shadow:0 2px 14px rgba(12,35,64,.09); }
.header__inner{
  max-width:var(--max); margin:0 auto; padding:.7rem clamp(1.1rem,3.5vw,2rem);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(1rem,2.5vw,2rem);
}
/* El logo es ancho (personaje + texto): alto fijo, ancho libre, sin recortes */
.logo{ display:flex; align-items:center; flex:0 0 auto; }
.logo-img{ height:84px; width:auto; max-width:none; display:block; }
.nav{ display:flex; align-items:center; gap:clamp(.75rem,1.5vw,1.6rem); margin-left:auto; }
.nav a{ font-size:.94rem; font-weight:550; color:var(--ink); white-space:nowrap; padding:.35rem 0; border-bottom:2px solid transparent; }
.nav a:hover{ color:var(--blue); border-bottom-color:var(--blue); }
.header__cta{ display:flex; align-items:center; gap:.6rem; flex:0 0 auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.4rem; border-radius:var(--radius);
  font-weight:650; font-size:.95rem; border:1.5px solid transparent;
  transition:background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn--blue{ background:var(--blue); color:#fff; }
.btn--blue:hover{ background:var(--blue-dark); box-shadow:0 8px 18px -8px rgba(19,85,164,.6); }
.btn--outline{ border-color:var(--line); color:var(--blue-900); background:#fff; }
.btn--outline:hover{ border-color:var(--blue); color:var(--blue); }
.btn--lg{ padding:1rem 1.8rem; font-size:1.02rem; }
.btn--sm{ padding:.55rem 1rem; font-size:.88rem; }

.burger{ display:none; width:42px; height:42px; background:none; border:1px solid var(--line); border-radius:var(--radius); position:relative; }
.burger span, .burger span::before, .burger span::after{
  content:""; position:absolute; left:11px; right:11px; height:2px; background:var(--blue-900); transition:transform .2s;
}
.burger span{ top:20px; }
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
.burger.is-open span{ background:transparent; }
.burger.is-open span::before{ transform:translateY(6px) rotate(45deg); }
.burger.is-open span::after{ transform:translateY(-6px) rotate(-45deg); }
.nav.is-open{
  display:flex; position:absolute; top:100%; left:0; right:0; background:#fff;
  flex-direction:column; align-items:flex-start; gap:.9rem;
  padding:1.2rem clamp(1.1rem,3.5vw,2rem) 1.5rem; border-bottom:1px solid var(--line);
  box-shadow:0 12px 24px rgba(12,35,64,.10);
}

/* ---------- Hero ---------- */
.hero{ background:linear-gradient(180deg, var(--blue-050) 0%, #fff 100%); border-bottom:1px solid var(--line); }
.hero__grid{ padding:clamp(2.5rem,5vw,4rem) 0; }
.hero__badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--line); color:var(--blue-900);
  font-size:.83rem; font-weight:600; padding:.4rem .85rem; border-radius:999px; margin-bottom:1.1rem;
}
.hero__badge i{ width:7px; height:7px; border-radius:50%; background:#3ecf8e; display:block; }
.hero p.lead{ font-size:1.08rem; color:var(--grey); margin-bottom:1.7rem; max-width:54ch; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; margin-top:1.5rem; font-size:.9rem; color:var(--grey); }
.hero__trust li{ display:flex; align-items:center; gap:.45rem; }
.hero__trust svg{ color:var(--blue); flex:0 0 auto; }
.hero__texto{ max-width:780px; }
.videoband{ padding:clamp(1.8rem,3.5vw,2.8rem) 0 0; }
.videoband figure{ margin:0; }
.videoband__frame{
  max-width:960px; margin:0 auto; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 26px 52px -32px rgba(12,35,64,.5);
  /* Si el navegador suelta la superficie del vídeo (pausado, pestaña en segundo
     plano, iOS tras volver de otra app), detrás queda la foto, no un color liso */
  background:#0c2340 url("../img/furgoneta-poster.jpg") center/cover no-repeat;
}
.videoband video{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.videoband figcaption{
  max-width:960px; margin:.75rem auto 0; font-size:.88rem; color:var(--grey);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.hero__media{ position:relative; }
.hero__media video{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:0 22px 44px -26px rgba(12,35,64,.45);
}
.hero__media figcaption{
  position:absolute; left:1rem; bottom:1rem;
  background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:6px;
  padding:.4rem .7rem; font-size:.78rem; font-weight:600; color:var(--blue-900);
}

/* ---------- Servicios ---------- */
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.service{ background:#fff; padding:1.6rem 1.5rem; display:block; transition:background-color .15s; }
a.service:hover{ background:var(--blue-050); }
.service__icon{
  width:42px; height:42px; border-radius:var(--radius); background:var(--blue-050);
  color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.service h3{ margin-bottom:.35rem; }
.service p{ font-size:.92rem; margin:0; }
.service__more{ display:inline-block; margin-top:.7rem; font-size:.85rem; font-weight:600; color:var(--blue); }

/* ---------- Por qué (3-4 columnas) ---------- */
.why{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,2.5vw,2.2rem); }
.why__item h3{ margin:.9rem 0 .4rem; }
.why__item p{ font-size:.93rem; margin:0; }
.why__check{
  width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Cifras ---------- */
.figures{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; text-align:center; }
.figure__num{ font-size:clamp(2.3rem,1.5rem + 2.6vw,3.4rem); font-weight:800; color:var(--blue); line-height:1; letter-spacing:-.03em; }
.figure__label{ margin-top:.5rem; font-size:.92rem; color:var(--grey); }

/* ---------- Galería ---------- */
.gallery{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.gallery figure{ margin:0; }
.gallery button{
  display:block; width:100%; padding:0; border:1px solid var(--line); background:none;
  border-radius:var(--radius); overflow:hidden; cursor:zoom-in; transition:box-shadow .15s, transform .15s;
}
.gallery button:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(12,35,64,.5); }
.gallery img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.gallery figcaption{ margin-top:.5rem; font-size:.82rem; color:var(--grey); }

/* ---------- Reseñas ---------- */
.rating{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin-bottom:.4rem; }
.rating__score{ font-size:2rem; font-weight:800; color:var(--blue-900); line-height:1; }
.stars{ color:var(--star); letter-spacing:.06em; }
.reviews{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.review{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; display:flex; flex-direction:column; gap:.6rem; }
.review p{ margin:0; font-size:.92rem; color:var(--ink); }
.review p.stars{ font-size:.95rem; }
.review__author{ margin-top:auto; font-weight:650; font-size:.87rem; color:var(--blue-900); }

/* ---------- Zonas ---------- */
.zones{ display:flex; flex-wrap:wrap; gap:.55rem; }
.zone{ border:1px solid var(--line); border-radius:var(--radius); padding:.55rem 1rem; font-size:.9rem; font-weight:550; color:var(--ink); background:#fff; transition:border-color .15s, color .15s; }
.zone:hover{ border-color:var(--blue); color:var(--blue); }
.zone.is-current{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); max-width:900px; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; background:none; border:0; text-align:left; padding:1.15rem 0;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-weight:650; font-size:1rem; color:var(--blue-900);
}
.faq__q:hover{ color:var(--blue); }
.faq__q .plus{ flex:0 0 auto; width:22px; height:22px; position:relative; }
.faq__q .plus::before,.faq__q .plus::after{ content:""; position:absolute; background:var(--blue); top:50%; left:50%; transform:translate(-50%,-50%); }
.faq__q .plus::before{ width:13px; height:2px; }
.faq__q .plus::after{ width:2px; height:13px; transition:transform .2s; }
.faq__item.is-open .plus::after{ transform:translate(-50%,-50%) rotate(90deg) scaleY(0); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq__a p{ padding-bottom:1.1rem; margin:0; font-size:.95rem; }

/* ---------- Contacto ---------- */
.contact{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(2rem,4vw,3rem); align-items:center; }
.contact__card{ background:var(--blue-900); color:#c9d6e5; border-radius:var(--radius); padding:2rem; }
.contact__card h3{ color:#fff; }
.contact__phone{ display:block; font-size:clamp(1.8rem,1.2rem + 2vw,2.5rem); font-weight:800; color:#fff; letter-spacing:-.02em; margin:.6rem 0 1rem; }
.contact__phone:hover{ color:#7fb2ee; }
.contact__card a.btn{ margin-top:.3rem; }
.contact__list{ margin-top:1.2rem; font-size:.9rem; display:grid; gap:.4rem; }
.contact__list a:hover{ color:#fff; }

/* ---------- Pie ---------- */
.footer{ background:var(--blue-900); color:#9fb3c8; padding:clamp(2.5rem,4vw,3.5rem) 0 1.5rem; font-size:.9rem; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1.3fr 1fr; gap:2rem; }
.footer h4{ color:#fff; font-size:.85rem; letter-spacing:.07em; text-transform:uppercase; margin:0 0 .9rem; }
.footer ul{ display:grid; gap:.45rem; }
.footer a:hover{ color:#fff; }
.footer .logo-img{ height:54px; margin-bottom:.9rem; }
.footer__zonas{ display:flex; flex-wrap:wrap; gap:.3rem .9rem; }
.footer__bottom{ margin-top:2rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.83rem; }

/* ---------- Lightbox ---------- */
.lightbox{ position:fixed; inset:0; background:rgba(12,35,64,.93); display:none; align-items:center; justify-content:center; z-index:100; padding:2rem; }
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:min(92vw,1000px); max-height:86vh; border-radius:var(--radius); }
.lightbox__close{ position:absolute; top:1.3rem; right:1.3rem; width:42px; height:42px; border-radius:50%; border:0; background:#fff; font-size:1.1rem; }

/* ---------- Migas ---------- */
.crumbs{ font-size:.85rem; color:var(--grey-soft); padding-top:1.1rem; }
.crumbs a:hover{ color:var(--blue); }

/* ---------- Revelado sobrio ---------- */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].is-revealed{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav a{ font-size:.88rem; }
  .nav{ gap:.85rem; }
}
@media (max-width:1080px){
  .why{ grid-template-columns:repeat(2,1fr); }
  .gallery{ grid-template-columns:repeat(3,1fr); }
  .reviews{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:920px){
  .nav{ display:none; }
  .burger{ display:block; }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ order:-1; }
  .services{ grid-template-columns:repeat(2,1fr); }
  .contact{ grid-template-columns:1fr; }
  .logo-img{ height:62px; }
}
@media (max-width:620px){
  .services{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .reviews{ grid-template-columns:1fr; }
  .figures{ grid-template-columns:1fr; gap:1.8rem; }
  .why{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .header__cta .btn span{ display:none; }
  .topbar__inner{ justify-content:center; font-size:.8rem; }
  .logo-img{ height:52px; }
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ---------- Selector de idioma ---------- */
.topbar__der{ display:inline-flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
.lang{ display:inline-flex; align-items:center; gap:.15rem; }
.lang a, .lang__on{
  font-size:.78rem; font-weight:600; letter-spacing:.04em; padding:.15rem .42rem;
  border-radius:4px; line-height:1.5;
}
.lang a{ color:#9fb3c8; }
.lang a:hover{ color:#fff; background:rgba(255,255,255,.12); }
.lang__on{ color:#0c2340; background:#fff; }
.footer .lang{ margin-top:1rem; }
.footer .lang a{ color:#9fb3c8; }
.footer .lang__on{ color:#0c2340; background:#fff; }
@media (max-width:620px){
  .topbar__der{ justify-content:center; width:100%; }
}