@charset "utf-8";
/* ==========================================================
   MOVA 2.0 · Mudanzas & Guardamuebles
   Dirección: «muelle de carga» — luz fría de nave, film
   estirable, manta azul y chaleco de alta visibilidad.
   Sistema gráfico único: pictogramas de manipulación ISO 780.
   ========================================================== */
@import url('../fonts/fonts.css');

:root{
  /* muelle */
  --film:#EEF1F2;        /* fondo: film estirable */
  --film-2:#E3E7E8;      /* banda suave */
  --hormigon:#D3D6D4;    /* superficies */
  --blanco:#F8FAFA;      /* hojas y campos */
  --manta:#262F7A;       /* color dominante */
  --manta-d:#1A2160;
  --manta-l:#3A44A0;
  --ruta:#0F1322;        /* texto y bloques oscuros */
  --ruta-2:#2A3040;
  --galv:#87929A;        /* galvanizado: estanterías, datos */
  --galv-d:#56616A;      /* galvanizado para texto */
  --hv:#D7F21C;          /* alta visibilidad: acción */
  --hv-d:#B9D10A;
  --fragil:#C8321C;      /* solo lo frágil */
  --ok:#1F8A6B;          /* conforme */
  --linea:rgba(15,19,34,.16);
  --linea-f:rgba(15,19,34,.85);

  /* compatibilidad con los nombres del motor 1.0 */
  --papel:var(--film); --papel-2:var(--film-2);
  --kraft:var(--hormigon); --kraft-l:#E0E3E2; --kraft-d:var(--galv-d);
  --tinta:var(--ruta); --tinta-2:var(--ruta-2);
  --sello:var(--manta); --cinta:var(--hv); --gris:#58626B;

  /* tipografía */
  --f-disp:'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --f-sans:'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:'Red Hat Mono', ui-monospace, Menlo, monospace;
  --f-placa:'Big Shoulders Stencil Display', 'Arial Narrow', sans-serif;
  --f-stencil:var(--f-disp); --f-mano:var(--f-mono);

  /* medidas */
  --hh:72px;
  --gut:clamp(16px, 3.2vw, 44px);
  --maxw:1440px;
  --r:2px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-lift:cubic-bezier(.34,1.3,.5,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 20px)}
body{margin:0;background:var(--film);color:var(--ruta);font-family:var(--f-sans);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--manta);outline-offset:3px}
.ink :focus-visible,.quilt :focus-visible,.manta :focus-visible,.foot :focus-visible{outline-color:var(--hv)}
::selection{background:var(--hv);color:var(--ruta)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ruta);color:var(--film);padding:10px 14px;text-decoration:none;transition:top .2s}
.skip:focus-visible{top:12px}
.grain{position:relative}

/* ---------- maquetación ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sec{padding:clamp(72px,9vw,136px) 0;position:relative}
.sec.tight{padding:clamp(52px,6vw,88px) 0}
.kraft,.hormigon{background:var(--hormigon);color:var(--ruta)}
.kraft-l{background:#E0E3E2}
.papel-2{background:var(--film-2)}
.ink{background:var(--ruta);color:var(--film)}
.manta,.quilt{background:var(--manta);color:var(--film)}
/* manta acolchada: costuras en rombo, solo como textura de bloque */
.quilt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 32L32 0L64 32L32 64Z' fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='1.2' stroke-dasharray='3 4'/%3E%3C/svg%3E")}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)}
.grid>*{min-width:0}

/* ---------- tipografía ---------- */
.st{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;letter-spacing:-.005em;line-height:.86}
.hx{font-family:var(--f-disp);font-weight:800;font-size:clamp(42px,5vw,80px);line-height:.92;letter-spacing:-.01em;text-transform:none;margin:0}
.hx em{font-style:normal}
.mano{font-family:var(--f-mono);font-weight:500}
.placa{font-family:var(--f-placa);font-weight:900;letter-spacing:.04em}
.d1{font-size:clamp(64px,11vw,184px)}
.d2{font-size:clamp(50px,7vw,120px)}
.u{font-family:var(--f-sans);font-size:.4em;text-transform:none;font-weight:700;letter-spacing:0}
.d3{font-size:clamp(40px,5vw,78px)}
.d4{font-size:clamp(30px,3.2vw,46px)}
.lead{font-size:clamp(18px,1.45vw,22px);line-height:1.5;max-width:40ch}
.body{max-width:62ch}
.body p{margin:0 0 1em}
.muted{color:var(--gris)}
.ink .muted,.quilt .muted,.manta .muted,.foot .muted{color:rgba(238,241,242,.74)}
/* rótulo de dato: monoespaciada, como la referencia de un bulto */
.fld{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;line-height:1.35}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 24px}
.eyebrow .pg{width:30px;height:30px;flex:none}
.eyebrow .n{display:none}
.num,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- pictogramas de manipulación (ISO 780) ---------- */
.pg{display:inline-block;width:1em;height:1em;vertical-align:-.12em}
.pgbig{display:block;width:clamp(72px,9vw,128px);height:auto;aspect-ratio:1;color:var(--manta)}
.pgbig .pg{width:100%;height:100%;display:block}
.manta .pgbig,.ink .pgbig{color:var(--hv)}

/* ---------- botones ---------- */
.btn{--bg:var(--ruta);--fg:var(--film);display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 22px;background:var(--bg);color:var(--fg);border:2px solid var(--bg);text-decoration:none;font-family:var(--f-sans);font-weight:700;font-size:15px;letter-spacing:.01em;cursor:pointer;position:relative;transition:transform .3s var(--ease-lift),background .2s,color .2s,border-color .2s}
.btn .ar{display:inline-block;transition:transform .3s var(--ease-lift)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .ar{transform:translateY(-2px)}
.btn:active{transform:none}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
/* acción principal: chaleco de alta visibilidad, siempre con texto oscuro */
.btn.red,.btn.hv{--bg:var(--hv);--fg:var(--ruta);border-color:var(--ruta)}
.manta .btn.red,.manta .btn.hv,.ink .btn.red,.ink .btn.hv,.quilt .btn.red{border-color:var(--hv)}
.btn.red:hover,.btn.hv:hover{--bg:var(--hv-d)}
.btn.paper{--bg:var(--film);--fg:var(--ruta)}
.btn.manta{--bg:var(--manta);--fg:var(--film)}
.btn.line{background:transparent;color:var(--bg)}
.btn.line:hover{background:var(--bg);color:var(--fg)}
.manta .btn.line,.ink .btn.line,.quilt .btn.line{--bg:var(--film);--fg:var(--ruta)}
.btn.sm{min-height:42px;padding:0 15px;font-size:14px}
.link{font-weight:650;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px;font-size:15.5px;display:inline-flex;gap:8px;align-items:center}
.link:hover{border-bottom-color:var(--hv-d)}

/* ---------- cincha: correa con hebilla (progreso y separadores) ---------- */
.cincha{--p:0;position:relative;height:18px;background:var(--hormigon);border-block:1.5px solid var(--ruta)}
.cincha::before{content:"";position:absolute;inset:0;width:calc(var(--p) * 1%);background:var(--manta) repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,.22) 10px 16px) center/100% 2px no-repeat;transition:width .6s var(--ease)}
.cincha::after{content:"";position:absolute;top:50%;left:calc(var(--p) * 1%);width:22px;height:26px;transform:translate(-50%,-50%);border:3px solid var(--ruta);background:var(--hv);border-radius:3px;transition:left .6s var(--ease)}
.manta .cincha{background:var(--manta-d);border-color:var(--film)}
.manta .cincha::before{background-color:var(--hv)}

/* ---------- hojas (antes «documentos») ---------- */
.tape,.rv-tape{display:none!important}
.stamp{display:inline-flex;align-items:center;gap:8px;border:2px solid currentColor;color:var(--manta);padding:5px 10px;font-family:var(--f-mono);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1;border-radius:2px}
.stamp.ok{color:var(--ok)}
.doc{background:var(--blanco);color:var(--ruta);position:relative;border:1.5px solid var(--ruta)}
.cells{display:grid;border-top:1.5px solid var(--linea-f);border-left:1.5px solid var(--linea-f)}
.cells>*{border-right:1.5px solid var(--linea-f);border-bottom:1.5px solid var(--linea-f);padding:10px 12px;min-width:0}
.cells .fld{display:block;color:var(--gris);margin-bottom:4px}

/* ---------- cabecera ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hh);background:rgba(238,241,242,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1.5px solid var(--ruta);transition:transform .45s var(--ease)}
.nav.hide{transform:translateY(-100%)}
.nav:focus-within{transform:none}
.nav .wrap{height:100%;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand .mk{height:34px;width:auto;color:var(--ruta)}
.dbrand{display:block;color:var(--film);margin-top:auto}
.dbrand .mk{height:auto;width:min(100%,280px);display:block}
.foot .brand{color:var(--film)}
.foot .brand .mk{height:40px;color:var(--film)}
.menu{display:flex;gap:2px;list-style:none;margin:0 auto;padding:0}
.menu a{display:block;padding:8px 11px;text-decoration:none;font-weight:600;font-size:15px;position:relative}
.menu a::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:3px;background:var(--manta);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}
.nav .right{display:flex;align-items:center;gap:16px;flex:none}
.tel{display:flex;flex-direction:column;align-items:flex-end;text-decoration:none;line-height:1.15}
.tel b{font-family:var(--f-mono);font-size:16px;font-weight:600}
.tel small{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--galv);display:inline-block}
.dot.on{background:var(--ok)}
.burger{display:none;width:48px;height:48px;border:2px solid var(--ruta);background:transparent;cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--ruta);transition:transform .35s var(--ease),top .35s var(--ease)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:27px}
.open .burger i:nth-child(1){top:22px;transform:rotate(45deg)}
.open .burger i:nth-child(2){top:22px;transform:rotate(-45deg)}
.drawer{position:fixed;inset:var(--hh) 0 0 0;z-index:55;background:var(--manta);color:var(--film);padding:24px var(--gut) 40px;display:flex;flex-direction:column;gap:24px;overflow:auto;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease),visibility 0s .5s}
.open .drawer{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .5s var(--ease)}
.drawer nav a{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1.5px solid rgba(238,241,242,.35);padding:10px 0 8px;text-decoration:none;font-family:var(--f-disp);font-weight:900;font-size:clamp(36px,10vw,54px);text-transform:uppercase;line-height:.95}
.drawer nav a .pg{width:28px;height:28px;flex:none;opacity:.6}
.drawer nav a[aria-current]{color:var(--hv)}
.drawer nav a[aria-current] .pg{opacity:1}
.drawer .doc{padding:18px;border-color:var(--film)}
main{display:block}
.pagetop{padding-top:var(--hh)}

/* barra fija en móvil: deja libre la esquina inferior derecha */
.mbar{display:none}

/* ---------- pie ---------- */
.foot{background:var(--ruta);color:var(--film);position:relative}
.foot .ftop{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.1fr;gap:var(--gut);padding:68px 0 48px}
.foot .ftop>*{min-width:0}
.foot h4{margin:0 0 14px;font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--hv)}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:0;font-size:15px}
.foot li a,.foot li span.l{display:inline-block;padding-block:4px}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.fbrand p{max-width:34ch;font-size:15px;color:rgba(238,241,242,.78);margin:20px 0}
.fbase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;font-size:14.5px}
.fbase a{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid rgba(238,241,242,.18);padding:5px 0}
.fbase em{font-style:normal;font-family:var(--f-mono);color:var(--galv);font-size:12px}
.fstrip{display:flex;border-top:1.5px solid rgba(238,241,242,.3);border-bottom:1.5px solid rgba(238,241,242,.3)}
.fstrip>div{flex:1;padding:14px 16px;border-right:1.5px solid rgba(238,241,242,.3);display:flex;gap:12px;align-items:center;font-size:14px;min-width:0}
.fstrip>div:last-child{border-right:0}
.fstrip .pg{width:28px;height:28px;flex:none;color:var(--hv)}
.fbot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:20px 0 26px;font-size:13.5px}
.fbot .c{justify-self:center}
.fbot .r{justify-self:end;color:var(--galv);padding-right:96px}
.fbot a{text-decoration:underline;text-underline-offset:3px}

/* ---------- huecos de imagen y vídeo ---------- */
.ph{position:relative;overflow:hidden;background:var(--hormigon);margin:0;isolation:isolate}
.ph>.art{position:absolute;inset:0;width:100%;height:100%}
.ph>.art svg{width:100%;height:100%}
.ph>img,.ph>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease);z-index:1}
.ph.has-img>img,.ph.has-vid>video{opacity:1}
.ph.has-vid>video{z-index:2}
.ph .cap{position:absolute;left:12px;bottom:12px;z-index:2;max-width:calc(100% - 24px);background:rgba(248,250,250,.94);color:var(--ruta);padding:6px 9px;font-size:11.5px;line-height:1.35;border:1px solid rgba(15,19,34,.25);transition:opacity .4s}
.ph .cap b{display:block;font-family:var(--f-mono);font-weight:500;letter-spacing:.04em;text-transform:uppercase;font-size:10px}
.ph.has-img .cap,.ph.has-vid .cap{opacity:0}
/* solo proporciones de Flow: 16:9, 4:3, 1:1, 3:4, 9:16 */
.r-169{aspect-ratio:16/9}.r-43{aspect-ratio:4/3}.r-11{aspect-ratio:1/1}.r-34{aspect-ratio:3/4}.r-916{aspect-ratio:9/16}
.r-45{aspect-ratio:3/4}.r-32{aspect-ratio:4/3}.r-23{aspect-ratio:3/4}

/* ---------- revelados ---------- */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .9s var(--ease-lift)}
.js .rv.on{opacity:1;transform:none}
.js .rv.w1{transition-delay:.07s}.js .rv.w2{transition-delay:.14s}.js .rv.w3{transition-delay:.21s}.js .rv.w4{transition-delay:.28s}
.js .rv-stamp>*{opacity:0}
.js .rv-stamp.on>*{opacity:1;transition:opacity .4s .2s}

/* ---------- cabeceras de página interior ---------- */
.phead{padding:calc(var(--hh) + clamp(40px,6vw,88px)) 0 clamp(36px,4.5vw,64px);position:relative;border-bottom:1.5px solid var(--ruta)}
.phead .crumbs{display:flex;gap:10px;align-items:center;margin-bottom:22px}
.phead .crumbs a{text-decoration:none}
.phead .crumbs a:hover{text-decoration:underline}
.phead h1{margin:0}
.phead .lead{margin-top:24px}
.phead-grid{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr);gap:var(--gut);align-items:end}
.phead-grid>.pgbig{align-self:start}
.phead.manta{border-bottom:0}
.phead.manta .crumbs .fld{color:var(--hv)}

/* ---------- utilidades ---------- */
.hr{border:0;border-top:1.5px solid var(--ruta);margin:0}
.flex{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.tagline{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border:1.5px solid currentColor;font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.proofs{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0;padding:0}
.proofs li{display:flex;align-items:baseline;gap:8px;font-size:14.5px}
.proofs b{font-family:var(--f-mono);font-weight:600;font-size:15px}

/* ---------- campos de formulario ---------- */
.f{display:block;position:relative;background:var(--blanco);border:1.5px solid var(--ruta);padding:8px 12px 6px;transition:box-shadow .2s}
.f:focus-within{box-shadow:0 0 0 3px var(--hv),0 0 0 4.5px var(--ruta)}
.f .fld{display:block;color:var(--gris)}
.f input,.f select,.f textarea{display:block;width:100%;border:0;background:transparent;padding:2px 0 4px;font-size:17px;min-width:0}
.f input:focus,.f select:focus,.f textarea:focus{outline:none}
.f textarea{resize:vertical;min-height:84px}
.f.err{border-color:var(--fragil);border-width:2px}
.f .msg{display:none;color:var(--fragil);font-size:13px;margin-top:2px;font-weight:600}
.f.err .msg{display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px solid var(--ruta);background:transparent;cursor:pointer;font-weight:600;font-size:15px;transition:background .2s,color .2s,transform .3s var(--ease-lift)}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed="true"],.chip[aria-checked="true"],.chip.on{background:var(--manta);border-color:var(--manta);color:var(--film)}
.manta .chip{border-color:var(--film)}
.manta .chip[aria-pressed="true"],.manta .chip[aria-checked="true"],.manta .chip.on{background:var(--hv);border-color:var(--hv);color:var(--ruta)}
.step-btn{width:42px;height:42px;border:1.5px solid var(--ruta);background:var(--blanco);cursor:pointer;font-size:20px;font-weight:700;line-height:1;display:grid;place-items:center;transition:background .2s,color .2s}
.step-btn:hover{background:var(--ruta);color:var(--film)}
.step-btn:disabled{opacity:.3;cursor:not-allowed;background:transparent;color:inherit}

/* ---------- responsive base ---------- */
@media (max-width:1240px){
  .menu{display:none}
  .burger{display:block}
  .nav .wrap{justify-content:space-between}
  .nav .right{margin-left:auto}
}
@media (max-width:900px){
  .foot .ftop{grid-template-columns:1fr 1fr}
  .fbrand{grid-column:1/-1}
  .fstrip{flex-direction:column}
  .fstrip>div{border-right:0;border-bottom:1.5px solid rgba(238,241,242,.3)}
  .fstrip>div:last-child{border-bottom:0}
  .phead-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--hh:64px}
  body{font-size:16px;padding-bottom:68px}
  .tel{display:none}
  .brand .mk{height:30px}
  .foot .brand .mk{height:36px}
  .nav .right .btn{display:none}
  .foot .ftop{grid-template-columns:1fr;padding:48px 0 32px}
  .fbot{grid-template-columns:1fr;justify-items:start;gap:8px}
  .fbot .c,.fbot .r{justify-self:start;padding-right:0}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:10px;right:86px;bottom:10px;z-index:58;transition:transform .35s var(--ease)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;font-weight:700;font-size:15px;text-decoration:none;border:2px solid var(--ruta);background:var(--film);color:var(--ruta)}
  .mbar a.go{background:var(--hv)}
  .open .mbar{transform:translateY(130%)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .rv{opacity:1;transform:none}
}
@media print{
  .nav,.drawer,.foot,.mbar,.noprint{display:none!important}
  body{padding:0}
}
