/* «Empieza tu traslado»: la camioneta Renta Carga (foto de la Ford de caja
   seca) con la paleta de la web. Llega al entrar en pantalla y entran cajas
   por la puerta trasera según el peso que se escribe en el formulario (plano-unidad.js). */

.plano-unidad {
  --pu-linea: var(--ink);
  --pu-acento: var(--blue);
  margin: 28px 0 0;
  padding: 22px 22px 18px;
  border-radius: 2px;
  color: var(--ink);
  background: var(--soft-blue);
  overflow: hidden;
}
.pu-encabezado { display: flex; flex-direction: column; gap: 8px; }
.pu-eyebrow { font-size: 10px; letter-spacing: 1.7px; font-weight: 600; color: var(--muted); }
.pu-titulo { font-size: 20px; letter-spacing: -.4px; color: var(--ink); }

.pu-unidades { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 6px; padding: 0; }
.pu-unidades li {
  padding: 7px 11px; border-radius: 2px; font-size: 12px;
  border: 1px solid rgba(16, 58, 140, .2); background: #fff; color: var(--muted);
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.pu-unidades b { font-size: 15px; font-weight: 600; color: var(--ink); transition: color .3s; }
.pu-unidades li.activa { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); }
.pu-unidades li.activa b { color: #fff; }

.pu-dibujo { display: block; width: 100%; height: auto; overflow: visible; }
.pu-dibujo * { vector-effect: non-scaling-stroke; }
/* foto de la camioneta: la caja es transparente en la imagen y se rellena aquí */
.pu-fondo-caja { fill: #fff; }
.pu-sombra { fill: rgba(16, 58, 140, .14); }
/* cajas de cartón que entran por la puerta trasera */
.pu-bulto { transform: translateX(var(--dx, -300px)); opacity: 0; transition: transform .75s cubic-bezier(.2, .75, .2, 1), opacity .25s ease; will-change: transform; }
.pu-bulto.dentro { transform: none; opacity: 1; }
.pu-bulto-caja { fill: var(--caja, #c99d64); stroke: var(--caja-borde, #a47a45); stroke-width: .8; }
/* las cajas son <use> de un símbolo: los tonos llegan por variables */
.pu-bulto-claro { --caja: #d4aa72; }
.pu-bulto-tapa { fill: rgba(255, 255, 255, .16); }
.pu-bulto-cinta { fill: #ead7ae; }
.pu-bultos.excede .pu-bulto { --caja: #e0705f; --caja-borde: #b9473a; }
/* la pared de la caja vela un poco las cajas: se ven «adentro» y el logo queda encima */
.pu-velo { fill: rgba(255, 255, 255, .22); pointer-events: none; }
.pu-guias polyline { fill: none; stroke: var(--pu-acento); stroke-width: 1.2; stroke-dasharray: .012 .01; }
.pu-guias circle { fill: #fff; stroke: var(--pu-acento); stroke-width: 1.6; }
.pu-dato { fill: var(--ink); font: 500 21px Arial, Helvetica, sans-serif; letter-spacing: -.5px; }
.pu-sub { fill: var(--muted); font: 600 9px Arial, Helvetica, sans-serif; letter-spacing: 1.5px; }
.pu-lectura { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); min-height: 2.6em; }
.pu-lectura b { color: var(--ink); font-weight: 600; }

/* al entrar en pantalla la camioneta llega desde la derecha, aparece el logo y se trazan las guías */
.plano-unidad [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pu-camion { opacity: 0; transform: translateX(70px); }
.pu-logo, .pu-guias text, .pu-guias circle { opacity: 0; }
.plano-unidad.dibujado .pu-camion { animation: pu-llega 1.1s cubic-bezier(.2, .8, .2, 1) forwards; }
.plano-unidad.dibujado .pu-logo { animation: pu-aparecer .6s ease .9s forwards; }
.plano-unidad.dibujado .pu-guias polyline { animation: pu-dibujar 1s ease 1s forwards; }
.plano-unidad.dibujado .pu-guias circle { animation: pu-aparecer .3s ease .95s forwards; }
.plano-unidad.dibujado .pu-guias text { animation: pu-aparecer .5s ease 1.4s forwards; }
/* las guías quedan punteadas una vez dibujadas */
/* ya llegó: el cambio de unidad se anima desde plano-unidad.js */
.plano-unidad.trazado .pu-camion { animation: none; opacity: 1; transform: none; }
.plano-unidad.trazado .pu-logo { animation: none; opacity: 1; }
.plano-unidad.trazado .pu-guias polyline { animation: none; stroke-dashoffset: 0; stroke-dasharray: .012 .01; }

@keyframes pu-llega { to { opacity: 1; transform: none; } }
@keyframes pu-dibujar { to { stroke-dashoffset: 0; } }
@keyframes pu-aparecer { to { opacity: 1; } }

/* ------------------------------------------------------------------ sección «¿Qué unidad necesitas?» */
.unidad-peso { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 6%; align-items: center; padding-top: 90px; padding-bottom: 90px; border-top: 1px solid var(--line); }
.up-texto h2 { margin: 14px 0 22px; }
.up-texto p:not(.eyebrow) { max-width: 380px; font-size: 14px; line-height: 1.8; color: var(--muted); }
.up-texto .up-nota { font-size: 12px; }
.unidad-peso .eyebrow i { background: var(--blue); }
.unidad-peso .plano-unidad { margin: 0; }

/* capacidades: botones para ver cada unidad */
.pu-unidades li { padding: 0; }
.pu-unidades button { all: unset; display: block; box-sizing: border-box; padding: 7px 11px; cursor: pointer; font-size: 12px; color: inherit; }
.pu-unidades button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pu-unidades li:hover:not(.activa) { border-color: var(--blue); }

/* campo de peso bajo el dibujo */
.pu-peso { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 12px 0 0; padding: 10px 14px; background: #fff; border: 1px solid rgba(16, 58, 140, .2); border-radius: 2px; font-size: 12px; color: var(--muted); }
.pu-peso:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(16, 58, 140, .12); }
.pu-campo { display: flex; align-items: baseline; gap: 6px; }
.pu-campo input { width: 120px; border: 0; padding: 4px 0; background: transparent; text-align: right; font: 500 22px Arial, Helvetica, sans-serif; letter-spacing: -.5px; color: var(--ink); -moz-appearance: textfield; }
.pu-campo input::-webkit-outer-spin-button, .pu-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pu-campo input:focus { outline: none; }
.pu-campo span { font-size: 13px; color: var(--muted); }

@media (max-width: 760px) {
  .unidad-peso { grid-template-columns: 1fr; gap: 24px; padding-top: 56px; padding-bottom: 56px; }
  .up-texto .up-nota { display: none; }
  /* el dibujo y el campo quedan juntos y compactos para verse con el teclado abierto */
  .unidad-peso .pu-encabezado { display: none; }
  .unidad-peso .pu-unidades { margin-top: 0; }
  .pu-peso { padding: 8px 12px; }
  .pu-campo input { width: 110px; font-size: 20px; }
  .plano-unidad { padding: 18px 14px 14px; }
  /* en teléfono las capacidades ya están en los chips: se ocultan las guías y la camioneta crece */
  .pu-guias { display: none; }
  .pu-dibujo { width: 142%; margin-left: -42%; }
}
@media (prefers-reduced-motion: reduce) {
  .plano-unidad [pathLength] { stroke-dashoffset: 0; animation: none !important; }
  .pu-camion, .pu-logo, .pu-guias text, .pu-guias circle { opacity: 1; transform: none; animation: none !important; }
  .pu-bulto { transition: opacity .2s; }
  .pu-guias polyline { stroke-dasharray: .012 .01; }
}

/* Keep the selected vehicle prominent at every capacity. */
.unidad-peso .pu-dibujo{width:100%;margin:12px 0 0;overflow:hidden}
.unidad-peso .pu-guias{display:none}
.unidad-peso .plano-unidad{border-radius:22px;border:1px solid #e1e8f3;background:linear-gradient(145deg,#f0f4fc,#e9eff9)}

/* On desktop the same animation accompanies the form and remains in view. */
@media(min-width:761px){
  #unidadPeso{display:none}
  #cotiza .quote-intro{align-self:stretch;min-width:0}
  .quote-unit-dock{position:sticky;top:24px}
  .quote-unit-dock .plano-unidad{margin-top:28px}
  .quote-unit-dock .pu-encabezado{gap:6px}
  .quote-unit-dock .pu-titulo{font-size:18px}
  .quote-unit-dock .pu-unidades{margin-top:12px}
  .quote-unit-dock .pu-peso{font-size:11px;padding:8px 10px}
}

@media(min-width:761px){
  #cotiza{row-gap:32px;align-items:start}
  #cotiza .quote-intro{display:contents}
  #cotiza .quote-copy{grid-column:1/-1}
  #cotiza .quote-copy>p:not(.eyebrow){max-width:680px;color:var(--muted);font-size:15px;line-height:1.6}
  #cotiza .quote-unit-dock{grid-column:1;grid-row:2;align-self:start}
  #cotiza .quote-form{grid-column:2;grid-row:2}
  #cotiza .quote-unit-dock .plano-unidad{margin-top:0}
}