.pago{
  position:relative;z-index:1100;
  padding:var(--cabeza-arriba) var(--lado) var(--v);
}

.pago__cabecera{padding-bottom:var(--v-tit)}

.pago__sello{font-size:14px;font-weight:500;text-transform:uppercase;margin-bottom:14px}

.pago__titulo{font-size:var(--titulo-pagina);font-weight:400;line-height:1.05;
  letter-spacing:-.02em}

.pago__cuerpo{display:grid;grid-template-columns:1fr minmax(300px,380px);
  gap:clamp(34px,4vw,72px);align-items:start}

.bloque{border-top:1px solid var(--negro);padding:26px 0 30px}

.bloque:first-child{border-top:0;padding-top:0}

.bloque__cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:20px}

.bloque__titulo{font-size:19px;font-weight:500;letter-spacing:-.01em}

.bloque__numero{font-size:13px;font-weight:500;opacity:.4;margin-right:10px}

.bloque__campos{margin-top:20px}

.campos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}

.campo{grid-column:span 6;display:flex;flex-direction:column;gap:7px}

.campo--medio{grid-column:span 3}

.campo--tercio{grid-column:span 2}

.campo--cuatro{grid-column:span 4}

.campo label{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;opacity:.55}

.campo input,.campo select,.campo textarea{
  font:inherit;font-size:16px;
  padding:13px 14px;
  border:1px solid var(--borde);
  background:var(--papel);
  color:var(--negro);
  border-radius:0;
}

.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;border-color:var(--negro);box-shadow:inset 0 0 0 1px var(--negro);
}

.campo[data-mal="1"] input,.campo[data-mal="1"] select{border-color:#a3372c;
  box-shadow:inset 0 0 0 1px #a3372c}

.campo__error{font-size:12.5px;color:#a3372c}

.opciones{display:flex;flex-direction:column;gap:10px;margin-top:18px}

.opcion{
  display:flex;align-items:center;gap:14px;
  padding:15px 16px;
  border:1px solid var(--borde);
  cursor:pointer;
  transition:border-color .25s var(--ease);
}

.opcion[data-puesta="1"]{border-color:var(--negro);box-shadow:inset 0 0 0 1px var(--negro)}

.opcion__marca{
  width:15px;height:15px;flex:0 0 auto;
  border:1px solid var(--negro);border-radius:50%;
  position:relative;
}

.opcion[data-puesta="1"] .opcion__marca::after{
  content:'';position:absolute;inset:3px;background:var(--negro);border-radius:50%;
}

.opcion__texto{flex:1 1 auto;font-size:15.5px}

.opcion__texto small{display:block;margin-top:3px;font-size:12.5px;opacity:.55}

.opcion__precio{font-size:15px;font-weight:500}

.resumen{
  position:sticky;top:calc(var(--alto-nav) + 24px);
  padding:24px;background:var(--papel);border:1px solid var(--negro);
}

.resumen__titulo{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  opacity:.55;margin-bottom:18px}

.resumen__lista{list-style:none;display:flex;flex-direction:column;gap:14px;
  max-height:38vh;overflow-y:auto}

.resumen__linea{display:flex;gap:13px;align-items:center}

.resumen__foto{width:54px;height:54px;flex:0 0 auto;background:var(--tela);object-fit:cover}

.resumen__que{flex:1 1 auto;font-size:14.5px;line-height:1.4}

.resumen__que small{display:block;margin-top:2px;font-size:12.5px;opacity:.5}

.resumen__precio{font-size:14.5px;font-weight:500;white-space:nowrap}

.resumen__cuentas{margin-top:22px;padding-top:18px;border-top:1px solid var(--borde);
  display:flex;flex-direction:column;gap:9px;font-size:14.5px}

.resumen__fila{display:flex;justify-content:space-between;gap:16px}

.resumen__fila span:last-child{font-weight:500}

.resumen__total{margin-top:6px;padding-top:14px;border-top:1px solid var(--borde);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:19px}

.resumen__total b{font-weight:500;font-size:24px;letter-spacing:-.01em}

.resumen__gratis{font-size:12.5px;opacity:.55;line-height:1.5}

.pago__acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}

.boton--grande{padding:17px 30px;font-size:14px}

.cargando{display:inline-flex;align-items:center;gap:11px}

.cargando i{
  width:13px;height:13px;border:1.5px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:gira .7s linear infinite;
}

@keyframes gira{to{transform:rotate(360deg)}}

.pasos{display:flex;gap:0;list-style:none;margin-bottom:30px;border-bottom:1px solid var(--borde)}

.pasos li{flex:1 1 0;padding-bottom:14px;position:relative}

.pasos li::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--negro);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}

.pasos li[data-estado="aqui"]::after,.pasos li[data-estado="hecho"]::after{transform:scaleX(1)}

.pasos b{display:block;font-size:12.5px;font-weight:500;text-transform:uppercase;
  letter-spacing:.05em;opacity:.35;transition:opacity .35s var(--ease)}

.pasos li[data-estado="aqui"] b,.pasos li[data-estado="hecho"] b{opacity:1}

.confirmado__arriba{display:flex;align-items:center;gap:clamp(16px,1.6vw,26px)}

.confirmado__marca{
  flex:0 0 auto;
  width:clamp(46px,3.4vw,62px);height:clamp(46px,3.4vw,62px);
  border:1px solid var(--negro);border-radius:50%;
  display:grid;place-content:center;
}

.confirmado__marca::after{
  content:'';width:19px;height:10px;margin-top:-4px;
  border-left:1.5px solid var(--negro);border-bottom:1.5px solid var(--negro);
  transform:rotate(-45deg);
}

.confirmado__titulo{font-size:clamp(28px,3.6vw,56px);font-weight:400;line-height:1.06;
  letter-spacing:-.022em}

.confirmado__texto{margin-top:20px;max-width:74ch;font-size:clamp(16px,1.4vw,18.5px);
  line-height:1.62;opacity:.78}

.confirmado__texto b{font-weight:500}

.confirmado__cuerpo{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,380px);
  gap:clamp(32px,3.4vw,64px);
  align-items:start;
  margin-top:34px;
}

.albaran{background:var(--papel);border:1px solid var(--negro);padding:clamp(26px,2.6vw,44px);
  font-variant-numeric:tabular-nums}

.albaran__cabeza{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px;
  padding-bottom:24px;border-bottom:1px solid var(--negro)}

.albaran__dato{font-size:13.5px;line-height:1.55}

.albaran__dato span{display:block;text-transform:uppercase;letter-spacing:.05em;
  font-size:11.5px;opacity:.5;margin-bottom:5px}

.albaran__dato b{font-weight:500;font-size:15px}

.albaran__tabla{width:100%;border-collapse:collapse;margin-top:26px;font-size:15px}

.albaran__tabla th{
  text-align:left;padding:0 0 12px;
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;opacity:.5;
  border-bottom:1px solid var(--borde);
}

.albaran__tabla td{padding:15px 0;border-bottom:1px solid var(--borde);vertical-align:middle}

.albaran__tabla th:not(:first-child),
.albaran__tabla td:not(:first-child){text-align:right}

.albaran__concepto{display:flex;align-items:center;gap:14px}

.albaran__concepto small{display:block;margin-top:2px;font-size:12.5px;opacity:.5}

.albaran__foto{width:54px;height:54px;flex:0 0 auto;background:var(--tela);object-fit:cover}

.albaran__sumas{display:flex;flex-direction:column;gap:9px;margin:22px 0 0 auto;
  width:min(340px,100%);font-size:15px}

.albaran__suma{display:flex;justify-content:space-between;gap:18px}

.albaran__suma span:last-child{font-weight:500}

.albaran__suma--total{margin-top:8px;padding-top:14px;border-top:1px solid var(--negro);
  font-size:19px;align-items:baseline}

.albaran__suma--total b{font-weight:500;font-size:24px;letter-spacing:-.01em}

.albaran__nota{margin-top:26px;padding-top:20px;border-top:1px solid var(--borde);
  font-size:13px;line-height:1.6;opacity:.55}

.estado{display:flex;flex-direction:column;gap:18px;position:sticky;
  top:calc(var(--alto-nav) + 24px)}

.estado__ficha{padding:22px;background:var(--papel);border:1px solid var(--negro)}

.estado__titulo{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:500}

.estado__punto{width:9px;height:9px;border-radius:50%;background:#3f8b74;flex:0 0 auto}

.estado__lista{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:16px;
  font-size:14.5px;font-variant-numeric:tabular-nums}

.estado__lista li{display:flex;justify-content:space-between;gap:16px}

.estado__lista b{font-weight:500}

.estado__rotulo{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  opacity:.55;margin-bottom:12px}

.estado__direccion{font-size:15px;line-height:1.62}

.confirmado__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.estado__imprimir{width:100%}

@media (max-width:900px){

  .pago__cuerpo{grid-template-columns:1fr;gap:30px}

  .resumen{position:static;order:-1;padding:18px}

  .resumen__lista{max-height:none}

  .resumen[data-plegado="1"] .resumen__lista,
  .resumen[data-plegado="1"] .resumen__cuentas{display:none}

  .resumen__abrir{
    display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
    font:inherit;font-size:14px;padding:0;border:0;background:none;color:var(--negro);
    cursor:pointer;
  }

  .resumen__abrir b{font-weight:500;font-size:17px}

  .campo--medio,.campo--tercio,.campo--cuatro{grid-column:span 6}

  .confirmado__cuerpo{grid-template-columns:1fr;gap:26px}

  .estado{position:static}

  .albaran{padding:20px}

  .albaran__tabla{font-size:14px}

  .albaran__foto{display:none}

  .pasos b{font-size:12px}
}

@media (min-width:901px){
  .resumen__abrir{display:none}
}

.entrar-al-pedido{max-width:640px;margin-top:10px}

.entrar-al-pedido__texto{margin-bottom:22px;font-size:15.5px;line-height:1.6}

.entrar-al-pedido .pago__acciones{align-items:center;margin-top:24px}

.entrar-al-pedido__olvido{font-size:13.5px;color:var(--negro);text-underline-offset:3px}